首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-29 05:39:18
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
推荐阅读
組裝5000左右的電腦需要什麼配置
組裝5000左右的電腦需要什麼配置
談到組裝電腦時大家都喜歡,因為組裝電腦的性價比非常高,但讓人頭疼的問題又來了,這個問題就是硬件配置的選擇,品牌兼容台式電腦的硬件配置在出廠時都已經設計規劃好了,但組裝電腦的硬件配置選擇具有很強的靈活性,如果電腦硬件組合搭配不好的話,那電腦的...
2026-01-29
qq怎麼設置多個手機登錄
qq怎麼設置多個手機登錄
微信正在取代手機QQ在我們生活中的地位,雖說微信和手機QQ都是騰訊旗下的産品,微信的許多功能也都是仿照手機QQ而出。不過,手機QQ和微信在很多功能上都有着極其明顯的差别。就好比說,一個微信APP隻允許登錄一個微信号,手機QQ卻能同時切換不同...
2026-01-29
神舟戰神tx8ca3da加内存條
神舟戰神tx8ca3da加内存條
要說遊戲本中的性價比之王,被用戶稱為神船的戰神筆記本當仁不讓,神舟戰神TX8-CA5DP遊戲本配備了i5-11400桌面級處理器GeForceRTX3060顯卡16.1吋72%色域144Hz電競屏16G/512GSSD/多彩背光鍵盤,現在8...
2026-01-29
vivo老年模式在哪裡
vivo老年模式在哪裡
vivo老年模式在哪裡?方法一:在主界面找到【設置】圖标,我來為大家科普一下關于vivo老年模式在哪裡?以下内容希望對你有幫助!vivo老年模式在哪裡方法一:在主界面找到【設置】圖标。找到并點擊打開【顯示與亮度】。打開【簡易模式】。點擊開啟...
2026-01-29
安裝攝像頭的方法
安裝攝像頭的方法
安裝攝像頭的方法?半球攝像頭安裝不需要支架,而且一般半球都是倒裝的,安裝在天花闆上,所以安裝起來也比較簡單,在天花闆上打幾個眼,把半球底座固定上就可以了槍機攝像頭也就是我們常見的攝像頭,需要支架來實現不同角度的監控根據不同安裝地點,可以使用...
2026-01-29
Copyright 2023-2026 - www.tftnews.com All Rights Reserved