精华内容
下载资源
问答
  • 1、在data数组里边添加id(说明:我的是虚拟数据) 2、在点击事件上传入id参数,如下: 3、在methods里边添加点击...以上这篇基于vue循环列表时点击跳转页面的方法就是小编分享给大家的全部内容了,希望能给大家一个
  • vue循环列表点击跳转页面方法

    千次阅读 2018-02-28 15:03:42
    2、在点击事件上传入id参数,如下: 3、在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面。 至此跳转完成。   附加: ...

    1、在data数组里边添加id(说明:我的是虚拟数据)

    2、在点击事件上传入id参数,如下:

    3、在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面。

    至此跳转完成。

     

    附加:

    点击返回上一页方法:

    window.history.go(-1);就是返回上一页。(不要忘记在标签上添加click点击事件)

     

    returnS:function () {
        window.history.go(-1);
    }

     

     

     

     

     

    展开全文
  • 点击 div 类名为b 时候,点击那个 那个div 里的span 下显示 再点击是隐藏。 new Vue({ el: '#app' , data: function () { return { items: [{ cl: '数据11111' , show: true }, { cl: ‘数据...
    <div id="app">
      <div class=‘b’ v-for='item in items' @click="toggle(item)">
        <span v-if='item.show'>{{item.cl}}</span>
      </div>
    </div>
    

      b里的每个div 都有span隐藏的。当点击 div 类名为b 时候,点击那个 那个div 里的span 下显示 再点击是隐藏。

    new Vue({
      el: '#app',
      data: function() {
        return {
          items: [{
            cl: '数据11111',
            show: true
          }, {
            cl: ‘数据22222’,
            show: true
          }
        ]
        }
      },
    
    
    
    
      methods: {
        toggle: function(item) {
             item.show = !item.show;
        }
      }
    })

     

    转载于:https://www.cnblogs.com/chen527/p/10020838.html

    展开全文
  • 同一个for循环列表,绑定不同的点击事件</h3> <div class="list" v-for="(item,index) in items" :key="index"> <p>{{item.title}}:{{item.styl}}</p> <button type="button" @click=...

    在这里插入图片描述

    <template>
      <div>
        <h3>同一个for循环列表,绑定不同的点击事件</h3>
        <div class="list" v-for="(item,index) in items" :key="index">
          <p>{{item.title}}{{item.styl}}</p>
          <button type="button" @click="update(item.num)">更新</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          items:[
            {
              id:'001',
              title:'更新1',
              styl:'更新一内容',
              num:'updateone'
            },{
              id:'002',
              title:'更新2',
              styl:'更新二内容',
              num:'updatetwo'
            }
          ]
        }
      },
      methods:{
        //更新的点击事件,传的参item.num = methodsNums
        update(methodsNums){
          //触发这个参数的方法
          this[methodsNums]()
        },
        updateone(){
          console.log('更新1');
        },
        updatetwo(){
          console.log('更新2');
        }
      },
    }
    </script>
    
    <style scoped lang='less'>
    .list{
      display: flex;
      justify-content: space-between;
      align-items:center;
      width: 100%;
      height: 200rpx;
      margin-bottom: 20px;
      padding: 0 10px;
      box-sizing: border-box;
      text-align: left;
      background: #fcc;
      p{
        flex: 1;
      }
      button{
        width: 44px;
        height: 26px;
        background: lightblue;
        bottom: 0;
      }
    }
    </style>
    
    展开全文
  • vue点击事件循环出来的关注列表 ,点击只关注其中一个并改变样式 这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template> <ul class="consultantSearch"&...

    vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式

    这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api,

    <template>
        <ul class="consultantSearch">
            <li class="consultantSearchLayout"  v-for="(consultantItem,consultantIndex) in consultantContent" :key="consultantIndex">
                <div class="consultantInfo">
                    <div class="photo">
                        <img class="protrait" :src="CommonJs.PHOTO_SRC+consultantItem.member.facePic" alt="">
                        <!-- sex 0保密 1男 2女-->
                        <img class="sex" v-if="consultantItem.member.sex=='0'" src="@/common/img/consultant_search_secret@2x.png" alt="">
                        <img class="sex" v-else-if="consultantItem.member.sex=='1'" src="@/common/img/consultant_search_man@2x.png" alt="">
                        <img class="sex" v-else-if="consultantItem.member.sex=='2'" src="@/common/img/consultant_search_woman@2x.png" alt="">
                    </div>
                    <div class="name">
                        <p class="nickName">{{consultantItem.member.nickName}}</p>
                        <p class="nickLevel" v-if="consultantItem.classify =='0'">初级咨询师</p>
                        <p class="nickLevel" v-else-if="consultantItem.classify =='1'">高级咨询师</p>
                        <p class="nickLevel" v-else-if="consultantItem.classify =='2'">资深咨询师</p>
                    </div>
                    <div class="attention" v-for="(conItem,conIndex) in conectList" :key="conIndex" v-if="conIndex==consultantIndex">
                        <router-link  :to="{path:'/DetailConsultant',query:{id:consultantItem.counselorId}}"  tag="span">
                            咨询师首页
                        </router-link>
                        <span v-if="conItem==0" @click="clickAbout(consultantItem.memberId,consultantIndex)">+关注</span>
                        <span v-else-if="conItem==1" style="color:#97979f;border:1px solid #97979f" @click="aboutTips">已关注</span>
                    </div>
                </div>
                <div class="consultantData">
                    <p class="certification">
                        <!-- 0否 1是 -->
                        <img v-if="consultantItem.member.isRealnameAuth =='0'" src="@/common/img/consultant_search_name_certification_no@2x.png" alt="">
                        <img v-else-if="consultantItem.member.isRealnameAuth =='1'" src="@/common/img/consultant_search_name_certification@2x.png" alt="">
                        <span v-if="consultantItem.member.isRealnameAuth =='0'">未实名认证</span>
                        <span v-else-if="consultantItem.member.isRealnameAuth =='1'">已实名认证</span>
                        <img v-if="consultantItem.member.isSkillsAuth =='0'" src="@/common/img/consultant_search_profession_certifition_no@2x.png" alt="">
                        <img v-else-if="consultantItem.member.isSkillsAuth =='1'" src="@/common/img/consultant_search_profession_certifition@2x.png" alt="">
                        <span v-if="consultantItem.member.isSkillsAuth=='0'">职业未认证</span>
                        <span v-else-if="consultantItem.member.isSkillsAuth=='1'">职业已认证</span>
                    </p>
                    <p class="number">
                        <span>{{consultantItem.member.followsTotal}}</span>
                        <span>{{consultantItem.member.fansTotal}}</span>
                        <span>{{consultantItem.member.likesTotal}}</span>
                        <span>{{consultantItem.member.collectsTotal}}</span>
                    </p>
                    <p class="title">
                        <span>关注</span>
                        <span>粉丝</span>
                        <span>获赞</span>
                        <span>收藏</span>
                    </p>
                    
                </div>
            </li>
    
    
        </ul>
    </template>
    
    <script>
    import { saveMemberFollow } from "@/request/api.js";
    import { Toast } from 'mint-ui'
        export default {
            data() {
                return {
                    consultantContent:[],
                    fllowed:false,
                    isAbout:"",
                    conectList:[]
                }
            },
           
            props:{
                consultantList:{
                    type:false,
                    default:function(){
                        return []
                    }
                },
               
                
            },
            watch:{
                consultantList:{
                    deep:true,
                    handler(newVal,oldVal){
                        this.consultantContent = newVal;
    
                        for (let i = 0; i < this.consultantContent.length; i++) {
                        this.conectList[i]= this.consultantContent[i].followStatus;
                        }
                    }
                },
               
            },
            methods:{
                clickAbout(id,index){
                    // this.$router.go(0)
                    // this.fllowed=!this.fllowed
                     this.infoExist();
                    // console.log("qqq"+JSON.stringify(this.newMemberIdArr))
                    let userInfo = this.$store.getters.userName;
                    userInfo = JSON.parse(userInfo);
                    saveMemberFollow({
                        memberId:userInfo.memberId,
                        toMemberId:id,
                    }).then(res=>{
                        Toast(res.msg)
                        this.$set(this.conectList,index,'1');
                    })
                },
                 infoExist(path){  //判定是否登录注册过
                    let userInfo = this.$store.getters.userName;
                    console.log("打印个人:"+userInfo);
                    userInfo = JSON.parse(userInfo);
                    if(userInfo==''||userInfo ==undefined||userInfo==null){
                        Toast("查看个人信息需要登录注册!")
                        let that = this;
                        setTimeout(function(){
                            that.$router.push('/Login');
                        },500);
                        return;
                    }
                    if(path==''||path ==undefined||path==null){
                        return;
                    }
                    this.$router.push(path);
                },
                aboutTips(){
                    Toast("已关注")
                }
            }
    
        }
    </script>
    
    <style  scoped>
    .consultantSearch{
        padding: 0 .24rem;
    }
    .consultantSearch li{
        margin-bottom: .32rem;
        border: 1px solid #e7eaf0;
        border-radius: 5px;
        padding: .24rem;
    }
    .consultantSearch li .consultantInfo{
        display: flex;
        align-items: flex-start;
    }
    .consultantSearch li .consultantInfo .photo{
        width: 27%;
        position: relative;
    }
    .consultantSearch li .consultantInfo .photo .protrait{
        position: absolute;
        top: 0;
        left: .24rem;
        z-index: 5;
        width: 45px;
        height: 45px;
        border-radius: 45px;
        border:1px solid #FA7D00;
        background-color: #fff;
    }
    .consultantSearch li .consultantInfo .photo .sex{
        position: absolute;
        top: .24rem;
        left: .64rem;
        z-index: 4;
        width: 50px;
        height: 21px;
    }
    .consultantSearch li .consultantInfo .name{
        width: 30%;
        position: relative;
    }
    .consultantSearch li .consultantInfo .name p{
        position: absolute;
        left: 0;
        width: 100%;
        font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #141418;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
    }
    .consultantSearch li .consultantInfo .name .nickName{
        top: 0;
        font-weight: bold;
    }
    .consultantSearch li .consultantInfo .name .nickLevel{
        top: .52rem;
        color: #5F5F6B;
        font-size: 12px;
    }
    .consultantSearch li .consultantInfo .attention{
        width: 43%;
        font-size: 14px;
        height: 45px;
        line-height: 45px;
        text-align: right;
        white-space: nowrap;
    }
    .consultantSearch li .consultantInfo .attention span{
        display: inline-block;
        font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FA7D00;
        border:1px solid #FA7D00;
        border-radius: 5px;
        height: 22px;
        line-height: 22px;
        padding: 0 .16rem;
    }
    /* .consultantSearch li .consultantData{
     
    } */
    .consultantSearch li .consultantData .certification{
        font-size: 12px;
        padding:  0 0 0 1.7rem;
        height: .72rem;
        line-height: .72rem;
    }
    .consultantSearch li .consultantData .certification img{
        width: .25rem;
        height: .24rem;
        display: inline-block;
    }
    .consultantSearch li .consultantData .certification span{
        font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #97979f;
        height: .24rem;
        line-height: .24rem;
        padding: 0 .16rem 0 0;
        display: inline-block;
    }
    .consultantSearch li .consultantData .number,
    .consultantSearch li .consultantData .title{
        display: flex;
        align-items: center;
        
    }
    .consultantSearch li .consultantData .number{
        padding: .16rem 0 .24rem 0;
    }
    .consultantSearch li .consultantData .number span{
        font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #5F5F6B;
        font-weight: bold;
        text-align: center;
        width: 25%;
    }
    .consultantSearch li .consultantData .title span{
        width: 25%;
        font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #97979f;
        font-weight: bold;
        text-align: center;
    }
    </style>

    出来仅供大家参考

    展开全文
  • 1.v-on:绑定一个事件 后面放事件名 简写 @事件名=“函数”例如:按钮var vm=new Vue({el:'#itany',data:{msg:'hello'},methods:{alt:function(){// alert(000)// console.log(this.msg);console.log(vm....
  • vue v-for循环列表 音乐单曲点击单独播放 目的是让单曲的播放和暂停分别和true和false绑定。 单曲组件 代码只截了片段 <template> <ul> <li v-for="(item, index) in ReMusics" :key="index">...
  • 1.以uniapp为例在v-for循环语句上写一个点击事件,传入必要参数像order_id。代码如下 <template> <view class="index"> <view class="new_box" style="margin-bottom: 100upx;"> <view ...
  • 列表清单中,每一个列表的说明条件都只显示一条,点击实现折叠面板的效果,需求如下图: 给商品添加了text和flag,点击展开文字,数据进行了更新,但是视图没有变化 <div class="goodsConfirm van-...
  • vue 实现列表点击出现下拉子菜单,再次点击收回 思路:首先在v-for 循环插入数据生成父级列表的时候给每个对象动态添加一个属性如 active 值为false。然后给父级列表添加点击事件,将点击的对象里面的唯一属性(如id...
  • 在v-for循环语句上定义一个点击事件,传入一个参数,点击的时候需要获取什么数据就传入什么,这里以获取 id 为例。 <template> <div> <ul> <li class="item" v-for="(item, index) in ...
  • <template> <div> <div @click="choose(index)"> index 键值(列表的索引值) 代表点击到第几个<...-- 2、创建点击事件choose,带参数键值(列表的索引值)index --> <!-- 3、添加点击样式ac
  • vue中的购物车功能,通过循环将购物车列表循环出来,每个商品前都有一个单选按钮,怎样在循环中通过绑定一个事件,来计算选中的商品,计算选中商品的总价?本文将介绍逻辑+具体代码逻辑:1.首先应该为循环出来商品...
  • html : for循环 上加点击事件传递uuid 参数 js :toShops(uuids) 点击事件接收uuid 通过query 的方式传递,这个方式直接传递到url上面。刷新页面不影响 2.详情页(接收页面) js : 通过 this.$route.query....
  • 最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案,新手只能用vue事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更...
  • v-on:click 添加一个事件监听器 ...this.todos[e].text 当前点击事件中,数据项的值 reverse 将一个元素的值反转输出 <div id="app"> <ol> <li v-for="(todo,index) in todos" v-on:clic...
  • <div><p>列表渲染的时候,事件绑定触发对应点击的元素</p><p>该提问来源于开源项目:MeCKodo/vue-tap</p></div>
  • vue.js 点击div标签时改变样式

    万次阅读 2019-04-02 15:57:25
    1.点击某一项后样式发生改变(循环列表的每一项的样式改变) 效果图 v-for循环展示productType中的数据 :class动态绑定样式表中.changeStyle的样式,将当前索引传递给changeSelectStyle @click点击事件触发...
  • 点击事件写在子元素中,把index传入作为参数 使用:class绑定选中的样式变化,设定一个默认值,当点中的时候,改变默认值为index的值,使得默认值和index作匹配,如果匹配相同,则样式修改成功。 ...
  • 给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去 在methods里面写点击事件: 首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。 ...
  • 最近有人问我一个问题vue中怎样传id 1.首先列表页:在我们渲染列表页数据...列表循环是我们取到他的id放到我们的点击事件中。 html <div class="studaylist clearfix" v-for="(item,i) in list" :key="i"> ...
  • 给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去 在methods里面写点击事件: 首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。 ...
  • vue中怎么实现获取当前点击对象this

    千次阅读 2019-02-27 17:17:00
    要是在传统的点击事件中,我们可以获取当前点击事件的this来执行相应的操作,但是在vue中没有这个点击this事件! 解决问题 在vue中我们要通过组件的方式来实现对当前元素进去切换 父组件 <v...
  • v-for的作用是循环渲染一块内容,比如对列表进行循环渲染,展示不同的数据。事件监听器(v-on指令)v-on指令可以为你添加一个事件监听器,用来与用户进行交互。我们可以使用v-on写一个一个非常简单的点...
  • vue开发web端实现列表左右联动效果

    千次阅读 2019-08-13 09:58:08
    先谈需求:左侧为分类列表,点击分类名右侧商品列表会滑动对应分类到顶部;右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示。...实现步骤:1,左右两侧均使用v-for循环列表,使...
  • v-for="(item, index) in listData"表格循环列表, @click="toogleExpand(index)"点击事件 v-show="item.active"收起展开 请求到数据前端自定义字段 getList() { Axios.post( 'admin/vue/order/getOrderList....
  • 这是一个列表循环的子组件,点击的时候传点击事件给父组件,父组件里跳转到详情页,这样写有问题吗,在ios点击跳转到详情页加载数据特别慢,显示默认数据有几秒钟才能加载上,下面是我列表和详情的代码列表组件:...
  • vue框架制作TodoList

    2017-09-02 21:08:00
    在初步学习了vue之后,我们可以使用vue的基础知识来实现一个todolist列表,主要功能是通过一个输入框来输入,然后将输入的内容同步的显示在页面上,当点击其中的一项...3.要实现点击事件,所以在列表上要通过v-on绑...
  • 这是一个列表循环的子组件,点击的时候传点击事件给父组件,父组件里跳转到详情页,这样写有问题吗,在ios点击跳转到详情页加载数据特别慢,显示默认数据有几秒钟才能加载上,下面是我列表和详情的代码列表组件:...

空空如也

空空如也

1 2 3
收藏数 49
精华内容 19
关键字:

vue循环列表点击事件

vue 订阅