事件处理
事件内联JS语句(类似于onclick)
方法事件处理器:一个指向组件上定义的方法的属性名或是路径。
App.vue关闭掉了,所以就要重新运行一下。
<template><h3>event demo</h3><button @click="count++"> Sadd </button><button @click="addCount"> Fadd </button><p> {{ count }} </p>
</template><script>
export default{data(){return{msg: "Event",count: 0}},methods:{addCount(){this.count += 1}}
}
</script>
dblclick #双击
click #单机
函数传参
<template><h3>event demo</h3><button @dblclick="count++"> Sadd </button><!-- <button @click="addCount"> Fadd </button> --><button @click="etest('hello')">ADD</button><p> {{ count }} </p>
</template><script>
export default{data(){return{msg: "Event",count: 0}},methods:{etest: function (param1) {console.log("pa: ");console.log(param1);this.count += 1;}}
}
</script>
v-for item传递参数
<template><h3>event demo</h3><button @dblclick="count++"> Sadd </button><!-- <button @click="addCount"> Fadd </button> --><button @click="etest('hello')">ADD</button><p> {{ count }} </p><h2> event </h2><p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index"> {{ item }} </p>
</template><script>
export default{data(){return{msg: "Event",count: 0,names:["wang","zhao","qian"]}},methods:{etest: function (param1) {console.log("pa: ");console.log(param1);this.count += 1;},getNameHandler: function (paam1) {console.log(paam1);},}
}
</script>