首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-02 07:20:22
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
推荐阅读
手機後置攝像頭和鏡子哪個真實
手機後置攝像頭和鏡子哪個真實
夏天,正值各色各樣的拍照旺季。無論是主動尋拍,還是被迫營業,看到大合照中的自己,不少人都會受到億點點傷害,這都是什麼醜東西?照片中張牙舞爪的人是誰??鏡子裡那個人見人愛的帥哥/美女去哪了?!那麼問題來了,自拍、他拍、鏡子裡,到底哪個才是真實...
2026-01-02
2022江蘇科技大學
2022江蘇科技大學
n主要标簽江蘇省重點建設高校、江蘇省屬重點大學、江蘇省與原中國船舶工業集團公司、原中國船舶重工集團公司共建高校、國防科技工業局與江蘇省共建高校n綜合信息學校類型:工科特色高校師資情況:教職工2200人,專任教師1510人,正高240人,副高...
2026-01-02
ps吸管工具如何用
ps吸管工具如何用
工具箱中的吸管工具組裡面,除了有吸管工具之外,還有3D材質和演示取樣這兩個工具,另外有标尺工具,注釋工具,還有計數工具,一共是六個工具,效果如圖所示。當我們選中吸管工具的時候,可以直接在打開的文件中,進行顔色吸取,直接生産前景色。注意:如果...
2026-01-02
ai智能拉新
ai智能拉新
來源:環球網RPA作為一種敏捷、高效、成本可控的數字化轉型方式,進入中國市場後,受到了高度關注和普遍接受。随着RPA技術的不斷發展,其與AI的結合也已成為行業發展的一大趨勢。但AI如何與RPA結合,才能快速落地并産生價值,是産業參與者共同面...
2026-01-02
柔性思維和反思性思維
柔性思維和反思性思維
1.晚上回家火急火燎準備做飯。原計劃是把昨天剩下的洗好的菜煮一鍋蘸醬吃。結果水開了,打開保鮮袋裝好的菜正準備下鍋,卻聞着菜被捂馊了不太好聞的味道。當時就有些傻眼,咋辦,計劃趕不上變化,晚上喝西北風嗎?!還是湊合着把菜放鍋裡煮煮吃了?!立刻啟...
2026-01-02
Copyright 2023-2026 - www.tftnews.com All Rights Reserved