版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88942198
效果图:
源码(复制即可运行)
App.vue
<!--06Vue点击事件,方法,获取数据,改变数据,事件对象及自定义属性-->
<template>
<!--渲染-->
<div id="app">
<div>{{this.msg}}</div>
<button v-on:click="imethod1()">点击事件写法1</button>
<br/>
<button @click="imethod1()">点击事件写法2</button>
<br/>
<button @click="imethod2()">获取data中的数据</button>
<br/>
<button @click="setMsg()">改变data中msg的值</button>
<br/>
<button @click="liebiao()">点击渲染列表</button>
<br/>
<button @click="chuancan('zhh')">带参数的方法</button>
<br/>
<button data-aid='123' @click="eventFn($event)">事件对象</button>
<br/>
<!--循环一个列表-->
<ul>
<li v-for="(item,key) in list">
{{key}}--- {{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
//数据
data () {
return {
msg: 'Welcome to Your Vue.js App',
list:[],
}
},
//方法
methods:{
imethod1(){
alert('点击事件1');
},
imethod2(){
// 获取数据
alert(this.msg);
},
setMsg(){
//数据改变,会自动刷新
this.msg = '修改后的值';
},
liebiao(){
//数据改变会自动刷新
for (let i=0;i<10;i++){
this.list.push("我是数据"+i);
}
},
chuancan(val){
alert("拿到的参数"+val);
},
eventFn(event){
//事件对象
console.log(event);
//获取dom节点
console.log(event.srcElement);
//获取自定义的属性,data-aid的值
console.log(event.srcElement.dataset.aid);
}
}
}
</script>
<style lang="scss">
</style>
源码下载: