首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-12 15:27:01
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-12
實用的外貿軟件有哪些
實用的外貿軟件有哪些
一個老外貿人感歎道:“以前我們就知道用郵件,有時候也不知道客戶有沒有收到,經常發了就石沉大海,現在有很多新工具出現了,能做到實時掌握客戶信息與需求,這是郵件不能替代的。”截至目前,全球已有150種以上的即時聊天工具,但外貿人最常使用的即時通...
2026-01-12
電腦經常藍屏是什麼原因
電腦經常藍屏是什麼原因
電腦經常藍屏是什麼原因?檢查硬盤壞道當電腦内存不夠的時候,系統會頻繁訪直接讀取硬盤文件,這樣容易導緻硬盤壞道,電腦顯示器出現藍屏情況可以先用軟件檢查硬盤是否有壞道的情況如果硬盤确實有壞道的情況,可以把重要數據先備份,再把硬盤重新格式化,壞道...
2026-01-12
華為手機出廠日期怎麼看
華為手機出廠日期怎麼看
華為手機出廠日期怎麼看?打開“設置”—“關于手機”—“狀态信息”—“序列号”,今天小編就來說說關于華為手機出廠日期怎麼看?下面更多詳細答案一起來看看吧!華為手機出廠日期怎麼看打開“設置”—“關于手機”—“狀态信息”—“序列号”序列号的第六、...
2026-01-12
造夢西遊4手機版一星獅子怎麼打
造夢西遊4手機版一星獅子怎麼打
造夢西遊4手機版一星獅子怎麼打?造夢西遊4手機版一星白象王組隊怎麼過?今天97973手遊網小編為大家帶來造夢西遊4手機版一星白象王組隊視頻攻略,希望這篇攻略能夠幫助大家,一起來看看視頻吧,接下來我們就來聊聊關于造夢西遊4手機版一星獅子怎麼打...
2026-01-12
Copyright 2023-2026 - www.tftnews.com All Rights Reserved