vue双向绑定怎么用（小白初学Vue之绑定事件）

效果如下：

a.属性绑定

b.双向数据绑定

b1.

b2.

<div id="root"> <!--事件绑定--> <div v-on:click="clicks">{{title}}</div> <!--此句与上句相同，没差。v-on:click="clicks"简写为@click="clicks"--> <div @click="clicks">{{title}}</div> <!--属性绑定--> <!--此处显示效果如上图所示--> <div title="hello!">{{title}}</div> <!--注意如果直接把title的属性值写成title，则此处的title将会被识别成字符串而不是Vue实例中的title。--> <div title="title">{{title}}</div> <!--那如果我想要它识别的是Vue实例中的title该怎么办呢？此时我们就会用到属性绑定 v-bind: 指令--> <div v-bind:title="title">{{title}}</div> <!--注意v-bind: 指令还可以简写成： 即v-bind:title=""简写为:title=""--> <div :title="title">{{title}}</div> <!--双向绑定--> <!--此处效果如上b1，但此时只是input的值与div的值是一样的，但是无论input的值如何改变，div的值都不会变化，如果想让他们变化的话该怎么办呢？--> <input type="text" :value="msg"/> <div>{{msg}}</div> <!--那如何让div的内容随着input的值的变化而变化呢？此时就要用到一个新的指令 v-model ，效果如b2--> <input type="text" v-model="msg"/> <div>{{msg}}</div> </div> <script> // 创建一个实例 new Vue({ el:"#root", data:{ title:"小丸子君", msg:"厉害了！大佬！" }, methods: { clicks: function() { this.title = "楚洁自话啊哈哈哈~~~~" } } }); </script>

小菜鸟又来啦，希望各位大佬们指导下小弟！阿里嘎都~ ------楚洁自话