首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-25 13:30:07
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
推荐阅读
windows11設置技巧
windows11設置技巧
微軟新系統windows11已經公布一段時間了,在打磨之後将于今年10月份正式發布。今天,帶你解鎖windows中少為人知的高效冷知識,幫你快速完成工作的同時,又顯得你很牛掰。01、快捷鍵首先,給大家上一波快捷鍵:WinE:快速打開資源管理...
2026-01-25
如何更清楚看到蘋果手機電池詳情
如何更清楚看到蘋果手機電池詳情
對于蘋果手機用戶來講,随着使用時間的延長,大家最關心的隻有兩點:1、電池容量,2、iOS系統更新。今天我們就來詳細聊聊關于蘋果手機電池的一些事情。文章從電池的使用環境、充電原理、充電周期、如何優化充電提升使用時間和壽命、充電配件的選型等方面...
2026-01-25
顯卡天梯圖2023最新排行榜
顯卡天梯圖2023最新排行榜
電腦最核心的兩大硬件莫屬CPU和顯卡,是電腦中關注度最高的兩大硬件,目前市面上顯卡主要分為兩大陣營,分别NVIDIA和AMD,也就是所謂的N卡和A卡。那麼怎麼看顯卡的性能檔次?下面裝機之家分享一下2019年2-3月桌面版顯卡天梯圖性能排行榜...
2026-01-25
火山小視頻怎麼變成抖音火山版了
火山小視頻怎麼變成抖音火山版了
火山小視頻怎麼變成抖音火山版了?火山小視頻和抖音正式宣布品牌整合升級,火山小視頻更名為抖音火山版,并啟用全新圖标,接下來我們就來聊聊關于火山小視頻怎麼變成抖音火山版了?以下内容大家不妨參考一二希望能幫到您!火山小視頻怎麼變成抖音火山版了火山...
2026-01-25
迷你世界隐藏的最厲害的boss
迷你世界隐藏的最厲害的boss
迷你世界的黑科技一直是清水非常喜歡類型,可是很可惜無法在生存中實現,最近清水發現了可以在生存中運用黑魔法,毫無理論可談,大家就一起去見證一下吧!首先在地面種一棵小樹苗,用肥料将樹苗催熟成大樹。在樹幹的旁邊放個轉軸方塊,在安放開關并将其打開,...
2026-01-25
Copyright 2023-2026 - www.tftnews.com All Rights Reserved