Vue绑定事件监听器，v-on
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>
当 event 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.red {
color: red;
}
img {
width: 100px;
height: 100px;
}
</style>
<body>
<div >
<button v-on:click="fun()"> 点我修改数据</button>
<!-- v-on也要有一个简写的方式 就是@ -->
<button @click="handleClose"> 点我修改数据</button>
<p>{{text}}</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
text: true
},
// 在与el属性和data属性的同级 使用methods来进行方法的定义
methods: {
fun() {
// 要把当前的text的值取反 this指向的就是vue实例
this.text = !this.text;
console.log(this.text);
},
handleClose: function() {
this.text = !this.text;
console.log(this.text);
}
}
})
</script>