首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-11-28 13:00:30
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
推荐阅读
拳皇97手機用什麼玩
拳皇97手機用什麼玩
自從目前最主流的格鬥遊戲網戰平台約戰競技場支持手機端後,我們時不時會在房間裡發現這樣的标識。2P玩家的手機端标識十分顯眼和大部分玩家一樣,老道一看到手機端的标識就會條件反射般冒出以下念頭:"菜","卡","為什麼要用手機玩97呢"........
2025-11-28
打印機無法掃描到電腦裡怎麼辦
打印機無法掃描到電腦裡怎麼辦
打印機無法掃描到電腦裡怎麼辦?方法一:首先檢查在掃描過程中,打印機是否顯示計算機故障或者繁忙,如果是,則立即拔掉打印機的電源,稍等一會後再重新插上,之後打印機就可以正常掃描了,我來為大家科普一下關于打印機無法掃描到電腦裡怎麼辦?下面希望有你...
2025-11-28
中國電信客服,
2025-11-28
華為手機打開遊戲空間
華為手機打開遊戲空間
華為手機的遊戲模式你用過嗎?作用是,可以讓手機的性能增強,從而提高遊戲的流暢度,讓我們的遊戲體驗變得更好。是不是很神奇?那如何開啟遊戲模式?接下來,我就來演示給大家一下。今天我就來演示給大家看一下。這裡插播一句話:喜歡的話點贊關注支持一下吧...
2025-11-28
推薦性價比高的10萬左右汽車
推薦性價比高的10萬左右汽車
十萬左右家用SUV推薦,五菱星辰軸距2750mm,配靈犀系統有不少車友想讓推薦一款SUV,既能滿足年輕人對SUV車型的喜好,駕車習慣,也能滿足家庭對于車型空間需求,關鍵是車價也得比較親民。近日,有一款高配不到十萬的SUV五菱星辰,以萬分之0...
2025-11-28
Copyright 2023-2025 - www.tftnews.com All Rights Reserved