首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-23 02:21: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
推荐阅读
現在能更新安卓12的機型
現在能更新安卓12的機型
點擊右上方“關注”,第一時間獲取科技資訊、技能攻略、産品體驗,私信我回複“01”,送你一份玩機技能大禮包。---------------------------------12月15日,谷歌在博客上透露,全新的Android12Go版本将于...
2025-12-23
excel下拉菜單帶數據跟随
excel下拉菜單帶數據跟随
在Excel中制作下拉菜單,大家都會的吧?常規操作。不過下拉菜單的區域通常都是固定的,如果數據源發生了變化,特别是增加了選項區域以後,下拉菜單并不會随之動态更新。解決方案當然是有的,比如我之前分享過的會自動去重,自動增減選項的智能Excel...
2025-12-23
簡單易用的項目管理軟件
簡單易用的項目管理軟件
有沒有永久免費的項目管理軟件?答案是肯定的,對于永久免費的項目管理軟件,我們推薦您使用ZohoProjects項目管理軟件。無論是從安全性,還是從實用性來講,ZohoProjects都可以成為您的最佳選擇。不得不說,通過搜索引擎得到的結果,...
2025-12-23
盧偉冰推出什麼手機
盧偉冰推出什麼手機
中關村在線消息:昨晚23:30分,Redmi品牌總經理盧偉冰在微博發出了深夜疑惑:為什麼年輕人不換手機了????網友評論稱性能夠用、沒什麼需求,還有人稱價格到位自然就買了,你有多久沒有換手機了?2022年手機市場整體已經沒有了此前繁榮的景象...
2025-12-23
如何清洗幹淨手機殼
如何清洗幹淨手機殼
如何清洗幹淨手機殼?首先需要取來一塊香皂和毛巾、盆、清水,我來為大家科普一下關于如何清洗幹淨手機殼?以下内容希望對你有幫助!如何清洗幹淨手機殼首先需要取來一塊香皂和毛巾、盆、清水。然後再用濕毛巾将手機殼裡外都擦濕。接着用肥皂在毛巾上磨一下,...
2025-12-23
Copyright 2023-2025 - www.tftnews.com All Rights Reserved