首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-13 10:52:12
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
推荐阅读
微博顯示ip屬地怎麼關閉
微博顯示ip屬地怎麼關閉
4月28日,微博官方宣布,今年3月上線的展示用戶IP屬地功能,現已全量開放,用戶發表評論均會展示IP屬地,同時還上線了“個人主頁一級頁面展示IP屬地”功能。其中,國内用戶顯示到省份/地區,國外用戶則顯示到國家。需要注意的是,這兩項功能均為強...
2026-01-13
新電腦怎麼連接wifi
新電腦怎麼連接wifi
新電腦怎麼連接wifi?新電腦怎麼連接wifi:首先需要打開電腦後,點擊網絡圖标,今天小編就來說說關于新電腦怎麼連接wifi?下面更多詳細答案一起來看看吧!新電腦怎麼連接wifi新電腦怎麼連接wifi:首先需要打開電腦後,點擊網絡圖标。然後...
2026-01-13
5g手機是不是一定要用5g套餐
5g手機是不是一定要用5g套餐
5g手機是不是一定要用5g套餐?以聯通為例近日,中國聯通官方賬号在知乎上明确表示,聯通用戶若使用的是4G套餐,持有5G手機,在5G網絡覆蓋下,也可以使用5G網絡,沿用4G簽約速率,即下行速率300Mbps,上行速率75Mbps,接下來我們就...
2026-01-13
加密軟件教程
加密軟件教程
現在是知識付費年代,視頻知識産權的概念逐漸深入人心,為了維護知識産權不被侵犯,視頻加密被提上日程。那麼視頻要怎麼加密呢?什麼樣的視頻加密軟件比較靠譜呢?EV加密是一款專業的視頻加密軟件,它操作起來非常的簡單,它的加密算法是用AES文件流加密...
2026-01-13
國美5g套餐介紹
國美5g套餐介紹
飛奔出考場,這一刻,不問結果那些努力拼搏過的日子都是美好的回憶那些前程似錦的未來也都是最好的安排看這溢出屏幕的喜悅!高考結束了狂歡才剛剛開始祝莘莘學子金榜題名!你的畢業禮,我們也準備好啦!學生購機專享4大權益用花呗分期更劃算0首付0利息每天...
2026-01-13
Copyright 2023-2026 - www.tftnews.com All Rights Reserved