首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-11-07 09:09:07
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
推荐阅读
win7藍屏代碼0x0000074怎麼解決
win7藍屏代碼0x0000074怎麼解決
1、開機按F8鍵,進入選擇菜單。2、進入安全模式卸載問題驅動、删除、替換有問題系統文件。3、還可用上下鍵,選中最後一次正确的配置這一項,回車執行重啟能解決問題。
2025-11-07
發表的視頻有水印怎麼辦
發表的視頻有水印怎麼辦
1、對于在手機上給視頻去水印,都需要一些工具的幫助,打開手機中的無痕去水印,然後在頁面中點擊視頻去水印”。2、然後會跳轉到視頻添加的頁面,在手機的相冊中添加你需要去水印的視頻。3、在進入去水印界面後,我們拖動進度條,選取需要去水印的畫面,然後調整畫面中的藍色框框,來選取畫面的去除水印的範圍。4、水印去除的畫面和範圍,都選取好後,我們點擊右上角的完成”。5、然後點擊保存即可将視頻保存到本地。
2025-11-07
号碼暫停服務怎麼恢複
号碼暫停服務怎麼恢複
以iphone12,ios14,微信8.0.2為例。欠費造成的暫停服務,充值即可恢複,若不是則需帶上身份證到當地營業廳進行詢問解決。1、打開手機上的微信,進入首頁後,點擊右下角的“我”。在個人頁面中,找到并點擊“支付”。2、點擊“手機充值”。3、進入充值頁面後,将手機号碼輸入,選擇要充值的金額,充值金額必須大于欠費金額。4、将支付密碼輸入即可。
2025-11-07
為什麼手機老是關機
為什麼手機老是關機
1、檢查手機電池:當你的手機使用了一些時間之後,電池就會出現一些問題。所以,如果你的手機自動關機了,那麼大家就要趕緊檢查一下電池是不是存在着一些問題。2、對手機進行安全掃描:很多時候,在我們不知情的情況下,你的手機很有可能被種植了一些病毒或者木馬,就有可能經常會出現自動關機的情況。3、檢查手機軟件:每一個品牌的手機都有自身設定的軟件容量。所以,在你的手機内如果下載了過多的軟件,或者你下載的軟件中有
2025-11-07
OPPO手機如何找回
OPPO手機如何找回
1、手機丢失後使用别人手機或者電腦登錄oppo雲服務,輸入賬号密碼登錄。2、進入雲服務後,點擊查找手機,進入定位界面。3、在這裡我們就可以看到我們手機的位置,可以放大查看位置範圍,作者試了下,紅色标注位置還是挺準确的。4、可以通過上述的定位信息進行找回,我們同時可以點擊左側手機上的【鎖屏】、【響鈴】...
2025-11-07
Copyright 2023-2025 - www.tftnews.com All Rights Reserved