本文章中描述
- v-on 指令的基本使用
- 点击按钮动态修改数据
1 简述
vue 中 v-on 指令简单点来讲，是用来给元素设置绑定事件。
格式
v-on:事件名称="方法名称"
这里的事件名称如：click 单击，dblclick 双击等等
这里的方法名称随机定义，指的是触发事件后所调用的方法
这是定义的方法名称，在 vue 实例中的 methods 属性中实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue v-on指令</title>
</head>
<body>
<div id="app">
<!-- 直接引用 -->
<!-- 单击事件 -->
<h3 v-on:click="login"> 登录</h3>
<!-- 鼠标指针进入（穿过）元素时 -->
<h3 v-on:monseenter="login2"> 第二次登录</h3>
<!-- 双击事件 -->
<h3 v-on:dblclick="login3"> 第三登录</h3>
<!-- 简写方式 -->
<!-- 用 @ 来替换 v-on: 达到简写方式 -->
<h3 @click="login"> 登录</h3>
<h3 @monseenter="login2"> 第二次登录</h3>
<h3 @dblclick="login3"> 第三登录</h3>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
login:function(){
alert("测试");
},
login2:function(){
},
login3:function(){
}
},
})
</script>
</body>
</html>
2 点击按钮更新数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue v-on指令</title>
</head>
<body>
<div id="app">
<h3 v-on:click="updateText"> 点击修改文本</h3>
<p> 这里是显示的文本 {{message}} </p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "哈哈 我的一个小疯子"
},
methods: {
updateText: function () {
// 在这里通过 this 关键字来引用 data 中定义的变量关键字
this.message = "这里是更新后显示的文本";
},
},
})
</script>
</body>
</html>
效果图：
点击后：
3 程序计数器实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 程序计数器</title>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
{{ count }}
<button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
count: 1,
},
methods: {
add: function () {
if (this.count < 10) {
this.count++;
} else {
alert("不可以大于10");
}
},
sub: function () {
if (this.count > 0) {
this.count--;
} else {
alert("不可小于0");
}
}
},
})
</script>
</body>
</html>
4 总结
