“Vue:v-on指令”的版本间的差异
来自CloudWiki
第27行: | 第27行: | ||
}); | }); | ||
</script></nowiki> | </script></nowiki> | ||
+ | |||
+ | ==效果== | ||
+ | [[文件:vue2022040703.png|600px]] |
2022年4月7日 (四) 01:28的版本
属性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>