“Vue:v-on指令”的版本间的差异
来自CloudWiki
(未显示同一用户的1个中间版本) | |||
第27行: | 第27行: | ||
}); | }); | ||
</script></nowiki> | </script></nowiki> | ||
+ | |||
+ | ===效果=== | ||
+ | [[文件:vue2022040703.png|600px]] | ||
+ | |||
+ | 除了直接在标签内写处理逻辑,还可以定义方法事件处理器。 | ||
+ | |||
+ | |||
+ | <nowiki> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
+ | <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> | ||
+ | <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | <script src="vue.js" type="text/javascript" charset="utf-8"> | ||
+ | |||
+ | </script> | ||
+ | <style type="text/css"> | ||
+ | .class1 { | ||
+ | padding:20px; | ||
+ | } | ||
+ | .backred { | ||
+ | background-color:red; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <title></title> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <div id="app"> | ||
+ | <h1>姓名:<label v-text="Name"></label></h1> | ||
+ | <h1>年龄:{{ Age }}</h1> | ||
+ | |||
+ | <button class="btn btn-primary" v-on:click="Hello">Hello</button> | ||
+ | </div> | ||
+ | |||
+ | <script src="Content/vue/dist/vue.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | //Model | ||
+ | var data = { | ||
+ | Name: '小明', | ||
+ | Age: 18, | ||
+ | } | ||
+ | |||
+ | //ViewModel | ||
+ | var vue = new Vue({ | ||
+ | el: '#app', | ||
+ | data: data, | ||
+ | methods: { | ||
+ | Hello: function (event) { | ||
+ | // `this` 在方法里指当前 Vue 实例 | ||
+ | alert('Hello ' + this.Name + '!'+'年龄增1'); | ||
+ | this.Age++; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | </nowiki> | ||
+ | |||
+ | |||
+ | [[文件:vue2022040704.png|600px]] |
2022年4月7日 (四) 01:34的最新版本
属性jquery的朋友应该很熟悉这个“on”,对于事件的监听和绑定,jquery里面最常用的就是on了。同样,在Vue里面,v-on指令用来绑定标签的事件,其语法和v-bind基本类似。
v-on:event="expression";
这里的event可以是Javascript里面的常用事件,也可以是自定义事件。
<div id="app"> <h1>姓名:<label v-text="Name"></label></h1> <h1>年龄:{{ Age }}</h1> <button class="btn btn-primary" v-on:click="Age++;if(Name=='小明')Name='吉姆格林';else Name='小明';">年龄递增</button> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script>
效果
除了直接在标签内写处理逻辑,还可以定义方法事件处理器。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <style type="text/css"> .class1 { padding:20px; } .backred { background-color:red; } </style> <title></title> </head> <body> <div id="app"> <h1>姓名:<label v-text="Name"></label></h1> <h1>年龄:{{ Age }}</h1> <button class="btn btn-primary" v-on:click="Hello">Hello</button> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, } //ViewModel var vue = new Vue({ el: '#app', data: data, methods: { Hello: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.Name + '!'+'年龄增1'); this.Age++; } } }); </script> </body> </html>