首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-29 05:53:21
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、左斜上箭頭,其實想要在鍵盤上實現這個左斜上箭頭是很容易的,按住ALT+43081(小鍵盤的)輸入...
2025-12-29
在EXCEL中怎麼設定自動提醒功能
在EXCEL中怎麼設定自動提醒功能
1、首先我們打開需要編輯的Excel表格,輸入要提醒的日期。2、然後我們在後方表格輸入=IFB2-A2
2025-12-29
手機内存已滿怎麼移到内存卡
手機内存已滿怎麼移到内存卡
1、在手機桌面上,找到設置”的圖标;2、打開設置,找到【應用程序】,并點擊打開;3、打開以後會顯示所安裝的全部應用,找到要搬家的應用;4、點擊以後,在界面下方會出現移至外置存儲卡”,點擊即可,
2025-12-29
冬天開暖風需要開ac嗎
冬天開暖風需要開ac嗎
1、夏天開空調的時候是需要打開AC按鍵的,但冬天打開暖風的話卻恰恰相反,并不需要打開AC按鍵。2、原因就是汽車供暖系統的工作原理和制冷不太一樣,汽車暖風是利用排氣管、水箱散發出來的熱量加熱空氣,然後通過風機吹到車内,并不需要啟動壓縮機。3、因此,開暖風的時候汽車油耗并不會産生多大變化。但是,如果使用...
2025-12-29
怎麼設置回車鍵發送消息
怎麼設置回車鍵發送消息
以華為MateBookX,win10,微信8.0.2為例。1、打開微信,點擊窗口左下方的三條橫線圖标。2、在彈出來的菜單列表中點擊選擇設置按鈕。3、在設置頁面左側的菜單欄中點擊選擇快捷按鍵。4、點擊發送消息後面的下拉箭頭符号。5、在下拉菜單中點擊選擇Enter選項。6、選擇好Enter選項後,關閉電腦微信的設置窗口,僅用Enter鍵即可發送信息。
2025-12-29
Copyright 2023-2025 - www.tftnews.com All Rights Reserved