效果如下：

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>

小菜鳥又來啦，希望各位大佬們指導下小弟！阿裡嘎都~ ------楚潔自話

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!