首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-11 06:37:24
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
推荐阅读
lol海克斯鑽石怎麼獲得
lol海克斯鑽石怎麼獲得
《LOL》海克斯科技稀有寶石獲得方法海克斯科技稀有寶石怎麼得、LOL海克斯科技稀有寶石怎麼得?本次海克斯科技活動通過稀有寶石可以換取海克斯科技安妮皮膚。下面是6399遊戲小編為大家帶來詳細的介紹、歡迎大家閱讀~LOL海克斯科技稀有寶石獲得方...
2026-01-11
我的世界手遊自創服務器
我的世界手遊自創服務器
一開始你會覺得這個世界那麼大,有那麼未知可以探索,但随着時間,你會發現這個世界那麼孤獨,所以還是玩聯機吧。——墨迹的小蘑菇網易代理的《我的世界》iOS版在昨晚悄悄上線,今天獲得AppStore首頁大圖推薦~(安卓玩家不用着急,Android...
2026-01-11
筆記本電腦到底怎麼選
筆記本電腦到底怎麼選
【CNMO評測】“筆記本電腦應該如何選擇?”每天都會有人提出這樣的“靈魂拷問”,在購物季中更是如此。确實,筆記本電腦的選擇涉及到外觀、性能、尺寸、續航等多個維度的考量,似乎一篇論文的内容量才能系統性地回答這個問題。不過,我們作為普通消費者沒...
2026-01-11
hmi與plc的編程
hmi與plc的編程
一、設備簡介背闆機是鋼卷加工的一款設備,主要生産的産品用于貨架的托盤。二、工藝要求1、背闆機的加工方式分兩種,一種是走定長不打孔切斷,另一種是根據設定打孔參數來打孔,然後再切斷。2、根據設置好的加工長度,和白段長度(就是不打孔的距離),孔參...
2026-01-11
通達信圖标代碼和顔色代碼
通達信圖标代碼和顔色代碼
通達信顔色代碼大全大家可能會對交易軟件各項指标會做增加或修改。用代碼編寫主副圖時,經常要用到顔色代碼。我們常用的代碼比較好記,也好寫。比如:紅色代碼為COLORRED,綠色代碼為ColorGreen。因為它用了對應的文字表述。但這些對應可直...
2026-01-11
Copyright 2023-2026 - www.tftnews.com All Rights Reserved