首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-09 19:45:38
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-09
夢幻西遊新年轉區
夢幻西遊新年轉區
遊戲的意義就在于它能夠給人帶來快樂,如果過多的摻雜其他的東西就失去了其本身的意義,大家好,我是小三,每天給大家分享遊戲中的八卦趣事。封妖任務是夢幻中非常普通的任務,但是封妖任務是需要由其他人挖寶圖的時候放出怪物才能夠進行的,不同等級的玩家都...
2026-01-09
筆記本電腦如何調亮度
筆記本電腦如何調亮度
筆記本電腦如何調亮度?點擊電腦屏幕左下角的“開始”,進入電腦的開始菜單頁面,我來為大家科普一下關于筆記本電腦如何調亮度?以下内容希望對你有幫助!筆記本電腦如何調亮度點擊電腦屏幕左下角的“開始”,進入電腦的開始菜單頁面。進入開始頁面後,在頁面...
2026-01-09
液壓系統頻繁打壓洩壓啥原因
液壓系統頻繁打壓洩壓啥原因
在大功率的液壓機、折彎機、矯直機等的液壓系統中,一般都需要設置洩壓回路,由于它們的工作壓力都很高,當主油缸上腔通入壓力油并進行壓制、拉伸或折彎時,高壓油具有很大的能量,除了推動油缸活塞下行完成工作外,還會使油缸機架、工作油缸本身、液壓元件、...
2026-01-09
谷歌無人機對比評測
谷歌無人機對比評測
在今年GoogleI/O大會上,谷歌展示了一款3D顯示、實時視頻壓縮、空間音頻、計算機視覺、機器學習等技術的3D光場顯示方案:ProjectStarline。該方案的特點是,可顯示具有體積和深度的立體視覺,讓視頻通話體驗看起來更加生動,沉浸...
2026-01-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved