Vue指令之`v-bind`的三种用法及v-on
Posted xiaowie
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue指令之`v-bind`的三种用法及v-on相关的知识,希望对你有一定的参考价值。
v-bind:是 Vue中,提供的用于绑定属性的指令
1. 直接使用指令`v-bind`
2. 使用简化指令`:`
3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ‘, 这是追加的内容‘"`
4.v-bind 中,可以写合法的JS表达式
<input type="button" value="按钮" v-bind:title="mytitle + ‘123‘"> <script src="./lib/vue-2.4.0.js"></script> <script> var vm = new Vue( el: ‘#app‘, data: msg: ‘123‘, msg2: ‘<h1>哈哈,我是一个大大的H1, 我大,我骄傲</h1>‘, mytitle: ‘这是一个自己定义的title‘ , methods: // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () alert(‘Hello‘) )
v-on: 事件绑定机制,可以简写@
<input type="button" value="按钮" @click="show"> <script src="./lib/vue-2.4.0.js"></script> <script> var vm = new Vue( el: ‘#app‘, data: msg: ‘123‘, msg2: ‘<h1>哈哈,我是一个大大的H1, 我大,我骄傲</h1>‘, mytitle: ‘这是一个自己定义的title‘ , methods: // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () alert(‘Hello‘) )
以上是关于Vue指令之`v-bind`的三种用法及v-on的主要内容,如果未能解决你的问题,请参考以下文章