<template>
<div id="app">
{{msg}}
<br>
<button v-on:click="run1()">执行是事件的第一种方法</button>
<br>
<button @click="run2()">执行是事件的第二种方法</button>
<br>
<button v-on:click="getMsg()">获取data里面的msg</button>
<br>
<button v-on:click="setMsg()">改变data里面的msg</button>
<br>
<button v-on:click="requestData()">请求数据</button>
<br>
<ul>
<li v-for="(item,key) in list">
{{key}}--{{item}}
</li>
</ul>
<br>
<button v-on:click="deleteData('111')">执行方法传值</button>
<br>
<button data-aid='123' v-on:click="eventFunction($event)">事件对象</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
list:[]
}
},
methods:{
run1:function(){
alert("这是一个方法");
},
run2(){
alert("这是二个方法");
},
getMsg(){
alert(this.msg);
},
setMsg(){
alert(this.msg="我是改变后的msg");
},
//动态将数据塞入List
requestData(){
for (var i = 0; i < 10; i++) {
this.list.push("我是第"+i+"条数据")
}
},
deleteData(val){
alert(val);
},
//输出dom节点的信息
eventFunction(e){
console.log(e);
e.srcElement.style.background='red';
//获取自定义属性的值
console.log(e.srcElement.dataset);
console.log(e.srcElement.dataset.aid);
}
}
}
</script>
运行截图: