一、單向數據綁定

<div id="root"><!-- 僅僅只是綁定一個屬性在標簽上 只有 data 變化，輸入框才會變化 -->數據單向綁定：<input type="text" name="" id="" :value="name"> </div> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;new Vue({el: '#root',data: {name: '張三'}}) </script>

二、雙向數據綁定

<div id="root"><!-- 輸入框和data中的數據任意一邊改變數據都會同步發生變化 -->數據雙向綁定：<input type="text" name="" id="" v-model="name"> </div> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;new Vue({el: '#root',data: {name: '張三'}}) </script> <!--備注：1. 雙向綁定一般都應用在表單類元素上，如（input、select等）2. v-model:value 可以簡寫成 v-model，因為 v-model 默認收集的就是 value 的值 --> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue数据绑定v-bind的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。