“Vue:v-on指令”的版本间的差异
来自CloudWiki
(创建页面,内容为“属性jquery的朋友应该很熟悉这个“on”,对于时间的监听和绑定,jquery里面最常用的就是on了。同样,在Vue里面,v-on指令用来…”) |
|||
第1行: | 第1行: | ||
− | + | 属性jquery的朋友应该很熟悉这个“on”,对于事件的监听和绑定,jquery里面最常用的就是on了。同样,在Vue里面,v-on指令用来绑定标签的事件,其语法和v-bind基本类似。 | |
<nowiki>v-on:event="expression";</nowiki> | <nowiki>v-on:event="expression";</nowiki> |
2022年4月7日 (四) 01:25的版本
属性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>