首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-28 17:29: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
推荐阅读
窗式空調器有哪些性能特點
窗式空調器有哪些性能特點
窗式空調器是一種可安裝在窗上或牆中的空調器。特點是體積小,重量輕,安裝使用方便;使用時隻需接通電源,即能自動地調節房間内溫度,并可随意調節房間内氣流方向,給人感覺舒适。窗式空調器的制冷系統采用全封閉式壓縮機,結構簡單,氣密性好,并設有調溫裝置及進風、排風裝置,可以自動調節溫度及排出室内污濁空氣,補進...
2025-12-28
數碼攝像機動力保養
數碼攝像機動力保養
數碼攝像機使用的電池一般是锂電池、鎳镉電池和鎳氫電池三種。使用鎳镉和鎳氫電池要避免電池因記憶效應而縮短使用壽命,所謂記憶效應是指導當電池電量尚未完全使用完前便放在充電器上充電的話,則電池的容量會相應減少,同時電池的使用壽命也會受到影響。所以數碼攝影機使用這類電池時,最好是等電池電量完全耗盡後,或者攝...
2025-12-28
燃氣熱水器
燃氣熱水器
直排式燃氣熱水器在使用的時候,其實和強直排式的熱水器有什麼區别呢。強排式熱水器在使用的時候,是可以使用一些特别長的傳熱管,還有金屬接觸面積特别多的一種熱交換器,工作的原理,其實是将燃燒了之後的氣體熱量很好的傳給金屬片加熱而工作的,希望我們加以了解的。燃氣熱水器的分類其實是比較多的,家用的燃氣快速使用...
2025-12-28
燃氣熱水器不打火
燃氣熱水器不打火
現在的家庭裡,隻要是安裝天然氣的,家裡的熱水器都不會使用耗電的熱水器,畢竟電費要比燃氣費貴出很多。不過在使用燃氣熱水器的時候,很容易出現一種問題,比較讓人惱火,就是燃氣熱水器不打火的情況。為了幫你解決這個問題,在這裡就為您介紹一下燃氣熱水器不打火的可能性。燃氣熱水器不打火是非常常見的一種問題,而導緻...
2025-12-28
家具品質巧識别
家具品質巧識别
随着市民生活質量的提高,對家具的選擇也越來越講究,并且,如果家具的品質較低,甚至會對健康造成影響,因此選購時需要多花一些心思,否則真是既浪費了錢财又損耗了健康。【1】有強烈刺激氣味的家具不要買選購時可拉開抽屜、打開櫃門,體驗是否刺激得讓人流淚,如果有這樣的感覺,就表明這套家具的甲醛含量嚴重超标。【2...
2025-12-28
Copyright 2023-2025 - www.tftnews.com All Rights Reserved