【星海出品】VUE（四）

星海出品】VUE（四）"/>

【星海出品】VUE（四）

事件处理
事件内联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>