vue.js構建-tft每日頭條

Vue中有兩種數據綁定的方法：一、單項數據綁定(v-bind)

單項數據綁定用“v-bind”指令，數據隻能從Vue實例的data屬性流向頁面，當data屬性值發生變化，頁面中對應的值也會随之變化，但頁面中的值變化，不會對data屬性值産生影響。

模闆容器和Vue實例

<body> <div id="root"> <input type="text" v-bind:value="name"> <span>{{name}}</span> </div> </body> <script> new Vue({ el:'#root', data:{ name:'百度' } }) </script>

修改input框内的值，span标簽内的值不會發生變化

修改input框内的值，Vue實例data中的name不會發生變化，因此span标簽内的值也不會發生變化

vue.js構建（Vue.js框架學習數據綁定）1

v-bind指令的簡寫形式

<body> <div id="root"> <input type="text" :value="name"> <span>{{name}}</span> </div> </body> <script> new Vue({ el:'#root', data:{ name:'百度' } }) </script>

二、雙向數據綁定(v-model)

雙向數據綁定用“v-model”指令，數據不僅能從Vue實例的data屬性流向頁面，還可以從頁面流向data屬性，當data屬性值發生變化，頁面中對應的值也會随之變化，反之頁面中的值變化，對應的data屬性值也會随之變化。

模闆容器和Vue實例

<body> <div id="root"> <input type="text" v-model:value="name"> <span>{{name}}</span> </div> </body> <script> new Vue({ el:'#root', data:{ name:'百度' } }) </script>

修改input框内的值，span标簽内的值會随之發生變化

修改input框内的值，Vue實例data中的name值也會随之發生變化，從而引起span标簽内的值發生變化

vue.js構建（Vue.js框架學習數據綁定）2

v-model指令的簡寫形式

<body> <div id="root"> <input type="text" v-model="name"> <span>{{name}}</span> </div> </body> <script> new Vue({ el:'#root', data:{ name:'百度' } }) </script>

注：雙向綁定一般都應用在表單類元素上，如input、select等。