首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-08 22:02:37
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
推荐阅读
電腦顯示未正确啟動怎麼做
電腦顯示未正确啟動怎麼做
1、首先,可能就是我們的操作失誤把系統文件整沒了,此時必須要進行本地還原,其原理也相當于手機的恢複出...
2025-12-08
微信不小心按了不顯示該聊天怎麼恢複
微信不小心按了不顯示該聊天怎麼恢複
1、我們要恢複的話,需要通過搜索按鈕,搜索對方的微信名字進入到聊天記錄裡面。2、然後我們主動給對方發...
2025-12-08
現在學什麼專業和技術前景好 2023吃香的專業
現在學什麼專業和技術前景好 2023吃香的專業
2023吃香前景好的專業有:軟件工程專業、電氣工程及其自動化專業、财務管理專業、計算機科學與技術專業、土木工程專業、法學專業、工商管理專業、英語專業等,都是學完畢業後很有發展的專業,值得各位考生報考。2023學什麼專業前景最好1、熱度最高的是軟件工程專業,選擇這門專業的畢業生就業率很高,之所以熱門,...
2025-12-08
筆記本外接顯示器分辨率怎麼設置
筆記本外接顯示器分辨率怎麼設置
演示機型:華為MateBookX系統版本:win71、用鼠标右鍵,點擊顯示器(外接)桌面的空白之處。2、在彈出的選項上,選擇屏幕分辨率,點擊進入。3、進入到更改顯示器的外觀界面後,點擊分辨率選項上的小三角。4、通過上下滑動調整,使外接的顯示器分辨率大小合适即可,然後點擊确定。5、确定後選擇保留更改,點擊還原,會還原更改以前的分辨率。6、多顯示器設置為隻在2上顯示桌面,就是在外接的顯示器上顯示桌面,
2025-12-08
車載凱立德如何使用
車載凱立德如何使用
1、直接設置目的地來導航,查找目的地在凱立德導航界面上點擊查找,進入查找操作界面,在查找操作界面的右...
2025-12-08
Copyright 2023-2025 - www.tftnews.com All Rights Reserved