首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-29 00:34:12
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
推荐阅读
好的設計網站排行
好的設計網站排行
當你想做一個圖不會ps,難道就涼了嗎?推薦四個可以在線設計的網站第一個:在線設計從海報,傳單,邀請函到賀卡,簡曆,計劃表以及logo,周報等應有盡有,還有ppt,幾乎覆蓋全部應用場景模闆免費,可商用選擇你需要的模闆進行修改簡直比ps還簡單第...
2026-01-29
各價位固态硬盤怎麼選
各價位固态硬盤怎麼選
前幾年固态硬盤和内存的價格漲跌都由三星、美光、海力士、西數這幾家說了算。隻要漲價,理由無外乎是失火、停電。可是近兩年就算不斷有新聞報道存儲工廠發生意外,這幾家竟然都沒有漲價,甚至還要全力保障生産。這其中原因便是國産存儲廠商快速崛起,讓這幾家...
2026-01-29
用短信能查詢近期到過的地方嗎
用短信能查詢近期到過的地方嗎
如何證明自己最近14天沒有到過疫情嚴重的地方?發個短信就能知道!在2月14日舉行的媒體通氣會上工信部信息通信管理局局長韓夏稱目前,三家基礎電信企業根據疫情防控的需要在得到用戶授權的情況下基于電信大數據分析向用戶提供本人“14天内到訪地查詢”...
2026-01-29
ipad電腦壁紙尺寸
ipad電腦壁紙尺寸
别再抱怨你在十幾億人中找不到一個對的人了考試時你選擇題四個選項都找不到一個對的人依舊是沒有收入的一天賬戶餘額越來越少心情不太好散散心找座島朋友問我在哪座島哦原來是窮困潦倒别叫我窮人那樣太傷自尊了請叫我價格敏感型消費者不要覺得我們單身的人很寂...
2026-01-29
excel常用函數零基礎
excel常用函數零基礎
從零掌握Excel技能、Excel函數職場必備技能118個視頻課程分享,職場幹貨需要的親們關注後私信哦!噔噔噔~幹貨俠蘭小萌上線啦像word、Excel、PPT這些基礎辦公室軟件,很多人都會用,但真正精通的卻不多。像我男票就特别精通Exce...
2026-01-29
Copyright 2023-2026 - www.tftnews.com All Rights Reserved