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') } } })
v-on也可以绑定的事件也可以传递参数的
<body> <div class="box"> <input type="button" value="点击" v-on:click="alterhandle('杜伟')"> </div> <script> var vm=new new Vue({ el:'.box', data:{ }, methods: { alterhandle:(ars)=>{ alert("欢迎您"+ars) } } } ) </script>