首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-26 22:13:52
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】激活新電池在新購機時筆記電池應帶有一定的電量。此時,您應該先不使用外接電源,把電池裡的餘電用盡,直至關機,然後再用外接電源充電。充電時間需要6-7個小時左右...
2025-12-26
VCD機常見故障的處理
VCD機常見故障的處理
1、開機後不能正常播放①、碟片髒。可用VCD清潔劑或用軟棉布沾純淨蒸餾水擦拭清洗碟片,幹淨後再試用。②、機内碟片重疊、卡住或滑出槽外。應打開機殼擺正碟片或取出多餘碟片。③、環境溫度低而失常,可以邊加熱邊試機,待正常時立即停止加熱。④、激光頭上有異物。可用VCD機專用清潔劑清潔,或打開機殼,用軟棉布沾...
2025-12-26
中央空調機分為幾類
中央空調機分為幾類
中央空調系統由冷熱源系統和空氣調節系統組成。制冷系統為空氣調節系統提供所需冷量,用以抵消室内環境的冷負荷;制熱系統為空氣調節系統提供用以抵消室内環境熱負荷的熱量。制冷系統是中央空調系統至關重要的部分,其采用種類、運行方式、結構形式等直接影響了中央空調系統在運行中的經濟性、高效性、合理性。按構造不同,...
2025-12-26
冰箱不制冷
冰箱不制冷
說到了冰箱這種家電,不得不說冰箱對于我們的日常生活是非常重要的一種家電之一。而冰箱的主要作用就是最大限度地制冷并且起到保持食物新鮮度的作用,但是很多朋友都會發現冰箱不制冷的現象是非常普遍的,而且還會經常遇到過冰箱不制冷的現象。那麼到底冰箱不制冷怎麼辦呢?應該怎麼解決這些問題呢?其實導緻冰箱不制冷的原...
2025-12-26
空調有臭味
空調有臭味
家裡有空調的人都知道,空調一段時間不用,然後再開就會有很濃的異味。那麼你知道這是什麼原因嗎?知道該如何才能緩解這種情況嗎?今天針對空調有異味這一個話題,我們将為大家介紹合理的解決方法,希望在以後的日常生活中能夠有所幫助。空調會讓家裡的空氣變得很幹燥,這是一個常識,因為空調在制冷的時候會帶走屋子裡面的...
2025-12-26
Copyright 2023-2025 - www.tftnews.com All Rights Reserved