首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-08 09:54:44
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
推荐阅读
反導系統深度解析(防空反導系統的絕殺方式演進史)
反導系統深度解析(防空反導系統的絕殺方式演進史)
  出品:科普中國   作者:嶽江鋒   策劃:宋雅娟   監制:光明網科普事業部   美國國防部在1981年設立了定向能技術局來開發粒子束武器和激光武器,并從當年開始實施預算額為3.15億美元的5年開發計劃。到80年代中期,在美國提出的“星球大戰”計劃中,定向能武器首次作為主力攔截武器的構想“躍然于紙上”,主要包括空間基激光器、地面基激光器、空間粒子束武器...
2026-01-08
技嘉GVN7302GI顯卡(技嘉GV
技嘉GVN7302GI顯卡(技嘉GV
  【中關村在線顯卡頻道】   技嘉 GV-N970G1 GAMING-4GD 顯卡是一款針對發燒級遊戲玩家推出的高性能産品,這款顯卡采用非公版PCB方案打造,擁有超越公版顯卡的核心頻率和更高效的散熱設計,對于全新DX12特效的支持也帶來更完美的遊戲體驗。現在這款顯卡在京東商城售價2699元,更為實惠。   【編輯點評】1.技嘉GV-N970G1 GAMIN...
2026-01-08
電腦磁盤怎麼清理
電腦磁盤怎麼清理
1、方法一:雙擊打開此電腦,右鍵點擊想要清理的磁盤。點擊“屬性”選項,點擊“磁盤清理”選項,選擇回收...
2026-01-08
聯想y7000拯救者2019拆機教程
聯想y7000拯救者2019拆機教程
1、拆機之前還是先做個防靜電處理,用自來水洗一下手或者去摸一下身邊的金屬材質的物品,這樣的目的是将會...
2026-01-08
一鏡到底怎樣拍
一鏡到底怎樣拍
1、規劃拍攝場景及腳本拍攝的第一步,先準備好拍攝器材,首先是簡單的相機設備以及智雲三軸穩定器,因為拍...
2026-01-08
Copyright 2023-2026 - www.tftnews.com All Rights Reserved