首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-25 01:10:09
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
推荐阅读
win10性能視覺效果怎麼設置
win10性能視覺效果怎麼設置
對于平時經常使用Win10系統電腦的小夥伴們來說,電腦顯示的畫面足夠細膩清晰,這也會使得我們整個娛樂或者是工作的過程,眼睛看起來更加的舒适。不過很多小夥伴在使用win10系統電腦的時候,遇到過這樣的問題,那就是在Win10系統前期的使用過程...
2025-12-25
聖安地列斯怎麼快速瞄準
聖安地列斯怎麼快速瞄準
《聖安地列斯》是屬于第三代續作,比罪惡都市晚出2年,但地圖比罪惡都市大很多倍,玩法也是增加了很多。其中任務難度比《罪惡都市》還要難,一不小心就會導緻任務失敗,【逆道追蹤】任務就是個列子。這個任務需要玩家去追蹤火車,然後讓同伴去攻擊火車上的守...
2025-12-25
手機各種系列病毒
手機各種系列病毒
昨晚上,各大高校都被一段“o泡果奶”的音頻占領了。對你們沒有看錯,就是前兩年那個“我要o泡,我要o泡,o泡果奶哦哦哦”的魔性廣告,出現在了各大高校的課堂上。事情的經過其實就是一個名為“一份禮物”的安裝程序在網絡社交平台被傳播開來,受害最嚴重...
2025-12-25
電腦連接不上wifi但手機能連上
電腦連接不上wifi但手機能連上
WIFI已經逐漸融入了我們的生活,但是有時候總會出現一些意外的情況,比如電腦突然連不上wifi而手機卻可以連。這事該怎麼辦呢?下面就來說一下該怎麼解決這個問題。操作方法01鼠标右鍵你桌面上的開始建。桌面上就會彈出一個設置框。找到控制面闆并點...
2025-12-25
二手手機換屏貓膩
二手手機換屏貓膩
懶人看結論系列:1,國内二手市場領頭羊:鹹魚、轉轉2,二手手機性價比之王:iPhone系列3,我們免費提供買手機、電腦咨詢一、二手手機市場分析國内二手市場主要是鹹魚和轉轉領頭,但是這些平台上流通着大量的卡貼機濫竽充數以及一些挂着低價但僅支持...
2025-12-25
Copyright 2023-2025 - www.tftnews.com All Rights Reserved