首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-27 20:49:09
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
推荐阅读
edup無線網卡安裝步驟
edup無線網卡安裝步驟
edup無線網卡安裝步驟?首先根據edup無線網卡的型号下載并解壓驅動某個文件夾下,我來為大家講解一下關于edup無線網卡安裝步驟?跟着小編一起來看一看吧!edup無線網卡安裝步驟首先根據edup無線網卡的型号下載并解壓驅動某個文件夾下。将...
2026-01-27
5g手機沒有ufs值得買嗎
5g手機沒有ufs值得買嗎
随着下半年旗艦機型的來臨,一個技術詞頻繁出現在各大廠商的機型介紹中,那就是UFS3.0。有不少人評價UFS3.0将逐漸成為所有旗艦的标配,也将是提升5G時代旗艦機型體驗的關系。但是相信不少人雖然知道UFS3.0相當重要,但是對于許多人而言U...
2026-01-27
紅軸和白軸鍵盤
紅軸和白軸鍵盤
在功能機,或者說是以塞班系統為代表的“準智能手機”時代,QWERTY全鍵盤無疑是最酷最實用的設計之一,并成就了黑莓手機和諾基亞E系列手機的赫赫戰功。實際上,在Android手機剛剛崛起的年代,全鍵盤也曾是盛行一時的設計,隻是出于種種原因成為...
2026-01-27
電腦上截屏是什麼快捷鍵
電腦上截屏是什麼快捷鍵
電腦上截屏是什麼快捷鍵?直接點擊鍵盤上的“PrintScreen”鍵,即可進行全屏截圖,接下來我們就來聊聊關于電腦上截屏是什麼快捷鍵?以下内容大家不妨參考一二希望能幫到您!電腦上截屏是什麼快捷鍵直接點擊鍵盤上的“PrintScreen”鍵,...
2026-01-27
安裝bim是如何操作的
安裝bim是如何操作的
家裝領域的BIM,面向的用戶對象是誰,解決什麼問題,如何才能落地執行……關于這些似乎每個公司都有各自的側重點和考量。而在落地的過程中,也總會遇到各種困難和問題,本文作為分享了自己對BIM在家裝領域落地的思考和做法,希望能給你帶來幫助。今天要...
2026-01-27
Copyright 2023-2026 - www.tftnews.com All Rights Reserved