Vue中v-for给遍历出的元素添加不同的事件

741 阅读1分钟

初用Vue时,很多人利用v-for遍历出不同节点,给各个点添加不同事件,但是不能每个元素都添加事件,下面是添加事件的方法。

个人例子  

 <div class="tit">        <div class="tit1" v-for="(item,index) in tit1" :key="index" @click="rout(item.id)">{{item.tit}}</div>      </div>

data部分

data() {    return {      tit1: [{tit:'政务云',id:'tit11'}, {tit:'政务网',id:'tit22'},{tit:'政务服务平台',id:'tit33'}],
}
},

重点是给原本的值改为对象模式,添加一个标记属性,添加方法

methods: {    rout(id){      this[id]()    },    tit11(){      console.log(11111);    },    tit22(){      console.log(22222);    },    tit33(){      console.log(33333);    }  },

这是我的遍历出来的3个按钮

添加的点击事件

这样就OK了