首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-15 03:18:02
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、廣域網和局域網是按相對的按連接範圍來說的。2、局域網局域網(LocalAreaNetwork),...
2026-01-15
打印機連在電腦上怎麼用
打印機連在電腦上怎麼用
1、打開電腦,在搜索欄搜索“控制面闆”。2、點擊進入後,選擇“硬件和聲音”。3、選擇“設備和打印機”...
2026-01-15
手機摔了一下開不了機了什麼原因
手機摔了一下開不了機了什麼原因
1、開機線路不正常:使用外接電源給手機供電,使用電聯表檢測看看示數是否有變化,如果沒有變化的話很可能就是開機線斷了或者開機鍵接觸不良。2、電池的供電電路不正常:使用外部接線手機進行供電,看看開機時候恢複正常,如果正常的話就确定是手機的供電電路不正常。3、手機電源的IC不正常:對照電路原理圖在電源IC的外圍電路的測試點上進行測試,看測試值是否正常。4、手機的系統時鐘和複位不正常:可以使用雙總示波器來
2026-01-15
1688可以退貨嗎
1688可以退貨嗎
視情況而定,需要商家開通支持後才可以無條件退貨。阿裡巴巴是一個采購批發平台,批發與零售确實會存在一定差異。考慮到這個點,且由于交易行為在于買、賣雙方,平台無法幹預,為了更能保障買家的權益,阿裡巴巴開放了“7天無理由退貨”由賣家自由選擇。當賣家發布信息的時候,可以選擇“是”或“否”,當這筆交易賣家選擇的是“否&rdq
2026-01-15
花呗分期商家是到賬是全部的嗎
花呗分期商家是到賬是全部的嗎
是。花呗分期是指用戶分期歸還花呗,但付款金額一次性打給商家,商家隻有拿到全款以後,才會将商品賣給客戶。舉例2000元的商品,用戶分期付款,第一期隻需要出200元,如果商家隻收到200元,就不會把2000元的商品銷售給客戶。花呗分期付款會一次性扣除支付金額,因此花呗額度不夠則不可以分期付款。花呗:呗全稱是螞蟻花呗,是螞蟻金服推出的一款消費信貸産品,申請開通後,将獲得500-50000元不等的消費額度
2026-01-15
Copyright 2023-2026 - www.tftnews.com All Rights Reserved