vue 点击动态绑定不同的事件
vue 点击动态绑定不同的事件今天接到业务要求优惠券做不同的数据详情请求,并且要求有的优惠券第一次能点击弹出一个文本框,第二次点击不允许,带三次可以(典型的奇偶点击);接着就是右下角有一个总按钮,奇数点击所有的优惠券可以查看,偶数全部失效;也不知道你们看懂没有,反正我们业务就是这样说的(因为这里没有数据所以我就用假数据做)。我是理解了,好了废话不多说直接上代码<template&g...
·
vue 点击动态绑定不同的事件
今天接到业务要求优惠券做不同的数据详情请求,并且要求有的优惠券第一次能点击弹出一个文本框,第二次点击不允许,带三次可以(典型的奇偶点击);接着就是右下角有一个总按钮,奇数点击所有的优惠券可以查看,偶数全部失效;
也不知道你们看懂没有,反正我们业务就是这样说的(因为这里没有数据所以我就用假数据做)。我是理解了,好了废话不多说直接上代码
<template>
<div id="app">
<div class="dynamic">
<button
class="dynamic-item"
v-for="(item,index) in list"
:key="index"
v-on:[eventName]="handleClick(item.doSome,index)"
>我的是动态元素--{{item.doSome}}</button>
</div>
<button @click="allClick">双点所有按钮失效</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
list: [
{ doSome: "doSomg1" },
{ doSome: "doSomg2" },
{ doSome: "doSomg3" },
{ doSome: "doSomg4" },
{ doSome: "doSomg5" },
{ doSome: "doSomg6" }
],
eventName: "click",
newArrys: new Array(5),
};
},
mounted() {
var s = new Array(5);
console.log(this.newArrys);
},
methods: {
handleClick(i, inedx) {
let doSomes = i;
this[doSomes](inedx);
},
doSomg1(inedx) {
this.newArrys[inedx] = !this.newArrys[inedx];
if (this.newArrys[inedx]) {
console.log("doSomg1", this.newArrys[inedx]);
}
},
doSomg2(inedx) {
console.log("doSomg2");
},
doSomg3(inedx) {
console.log("doSomg3");
},
doSomg4(inedx) {
console.log("doSomg4");
},
doSomg5(inedx) {
console.log("doSomg5");
},
doSomg6(inedx) {
console.log("doSomg6");
},
allClick(){
this.eventName=='click'? this.eventName=null: this.eventName='click'
}
}
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)