首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-25 05:33:11
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
推荐阅读
dnf拍賣行材料
dnf拍賣行材料
随着版本的跨度,裝備打造要實現銘刻,品級調整箱十分關鍵。機械戰神實驗室副本中,推出了強力左槽部位,需全身平均96%以上裝備品級,又把調整箱推上了風口浪尖。其實品級調整箱道具,遊戲裡不難獲取,拍賣行能夠囤貨,11W金币一個!拍賣行品級調整箱能...
2025-12-25
抖音怎麼關閉自動升級
抖音怎麼關閉自動升級
使用抖音刷短視頻時,突然需要更新系統,很多小夥伴都表示不需要自動更新功能,實際上這是可以關閉的。今天小編就帶大家看下本期教程,操作學習起來吧!如何關閉抖音自動更新系統?1、在手機應用商店“我的”界面點擊【設置】。2、點擊【自動更新應用】。3...
2025-12-25
各種手機的飛行模式是幹嘛用的
各種手機的飛行模式是幹嘛用的
【天極網IT新聞頻道】先來說說什麼叫飛行模式吧。其實我們對于飛行模式應該都不陌生,并不是那個打開了這個功能手機就能飛,而是主要用于在飛機飛行時需要開啟的一個功能。簡單點說,就是打開飛行模式,避免其發射信号,從而影響飛機的正常飛行。雖然現在我...
2025-12-25
網站頁面優化詳解
網站頁面優化詳解
在說到網站優化的時候,很多人都把精力放在首頁上面,但其實網站内頁的優化也是相當重要的,内頁關鍵詞的排名其實就是網站的長尾關鍵詞的排名,事實上,網站的很多流量都是來自長尾關鍵詞。因此我們需要認真研究網站長尾關鍵詞的選擇,認真研究網站内頁的優化...
2025-12-25
魔獸世界懷舊服tbc 各職業剛滿級
魔獸世界懷舊服tbc 各職業剛滿級
作者:NGA-世界麼麼前言感謝猴子提供的測試服資格,讓我能夠先一步的體驗了TBC的部分内容。本次測試主攻法師,本文主要涉及到法師60到70的變化、PVE天賦推薦及輸出手法介紹、推薦的附魔以及寶石和P1階段冰法BIS裝備推薦。第一部分:60到...
2025-12-25
Copyright 2023-2025 - www.tftnews.com All Rights Reserved