首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-29 12:03:46
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等。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
汝南網站優化價格
汝南網站優化價格
對于企業網絡推廣來說,無論是一個老的網站還是新的網站,都要對企業網站進行SEO優化處理。網站的SEO優化有利于發現企業網站的一些問題,及時了解周邊信息,保證企業經營順利和安全。要做到盡最大可能讓更多的搜索引擎自然地出現在搜索輸入欄下方,并盡...
2026-01-29
excel每日數據整理技巧
excel每日數據整理技巧
看看有沒有你需要的程序(可試用)01-批量提取指定模闆多個工作簿工作表單元格數據02-批量修改多個工作簿工作表單元格數據03-多列轉換成一列04-多行轉換成一行05-批量将工作表數據轉換成數值06-批量将xls工作簿轉換成xlsx格式07-...
2026-01-29
iphone13 和13pro拍照對比測評
iphone13 和13pro拍照對比測評
說到現如今的智能手機,其實各家品牌的手機在外觀和性能上都已經明顯趨于大同化,所以就算是你發現了某款手機和另一款手機驚奇的相似也不足為奇。那麼面對這種局面,大部分人追求的方向都逐漸轉移到了手機影像能力的表現上。今天咱們就來盤一盤目前拍照最強的...
2026-01-29
王牌戰争中穿得最少的角色皮膚
王牌戰争中穿得最少的角色皮膚
#頭條創作挑戰賽#文丨可兒遊戲說原創王者榮耀每年都會推出好幾款KPL限定皮膚,去年一年裡就出了三款KPL系列皮膚,屬于東方鏡、夏侯惇還有魯班大師這三個英雄,下一款KPL限定皮膚則屬于沈夢溪,這一點官方也已經暗示過了,除了沈夢溪之外,KPL系...
2026-01-29
完整的網頁設計制作步驟
完整的網頁設計制作步驟
完整的網頁設計制作步驟?大家好,我是小猿,今天我來教大家制作簡單的網頁設計對網頁設計感興趣的朋友可關注我,或者在文章留言,我會一一回答你們的問題,謝謝,我來為大家科普一下關于完整的網頁設計制作步驟?下面希望有你要的答案,我們一起來看看吧!完...
2026-01-29
Copyright 2023-2026 - www.tftnews.com All Rights Reserved