首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-05 10:12:18
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
推荐阅读
如何追尋小三的蹤迹
如何追尋小三的蹤迹
和一個人有緣分自然感情就不同,一同做事就會心有靈犀事半功倍,現實中會這樣,遊戲中更是如此。《小三來了》緣分系統,讓你的主将和副将在一起作戰更加有力量!緣分系統是《小三來了》中的特色系統,獨闖的緣分屬性加成,使“小三”中的兵種搭配更加的玄妙。...
2026-01-05
一元奪寶哪個平台比較靠譜
一元奪寶哪個平台比較靠譜
在前些日,一元奪寶被正式定性為“網絡賭博”,部分一元奪寶可能會被定性為“詐騙”。一元奪寶行業,高峰時市面上有幾千家奪寶平台運營,終于結束了作惡。接下來本文想明确告訴讀者:一、一元奪寶通過何種算法進行作弊1.幾乎所有一元奪寶類軟件的開獎都不透...
2026-01-05
海島奇兵新版本更新内容
海島奇兵新版本更新内容
海島奇兵2月20.45.1版本更新彙總,介紹海島奇兵2月5日詳細更新了哪些内容?海島奇兵20.45.1版本新增什麼内容?希望這篇海島奇兵2月20.45.1版本更新彙總能幫到海島奇兵的玩家!2月5日下午,《海島奇兵》進行了一次大更新,版本号升...
2026-01-05
全國學籍系統操作
全國學籍系統操作
點擊頁面下方“了解更多”查看更多常見問題。1特教學校如何新建年級?答:特教學校無需再建新年級了,隻是把學生學籍注冊到現在系統中的對應年級(忽略現在系統中的2018、2019……等數字,隻認一年級、二年級……)學籍系統二期,對特教學校學生沒有...
2026-01-05
有哪些第三方測評工具
有哪些第三方測評工具
不少HR朋友會讓我推薦測評工具,面對市場上琳琅滿目的測評工具,往往不知道怎麼辦?實際上測評工具說多是多,說少也少,我曾經推薦過的測評工具,恐怕一支手可以數出來。在我介紹自身比較認可的測評工具的過程中,很多HR也會問我信效度的事情。有些HR經...
2026-01-05
Copyright 2023-2026 - www.tftnews.com All Rights Reserved