首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-13 01:25:25
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
推荐阅读
超級詳細的手機發展史
超級詳細的手機發展史
作為全球第一的手機品牌,三星為何會退出中國市場?或許現在很多的年輕人不太清楚,但8090後肯定還記得,當年Note7事件至今也沒有給一個說法,三星既然不把中國消費者當回事兒,國内消費者自然也不會買賬了。但自從華為被斷芯之後,空出來的市場份額...
2026-01-13
内存條是ddr3還是ddr4在哪裡看
内存條是ddr3還是ddr4在哪裡看
内存條是ddr3還是ddr4在哪裡看?如今,新電腦已經完全普及DDR4内存,已經是目前主流從内存的發展曆史來看,曆代内存發展都是往高頻、低功耗的路線發展的,而DDR4内存也不例外,那麼DDR3與DDR4内存有什麼區别?DDR4相比DDR3内...
2026-01-13
西安兒童室内遊樂場設備
西安兒童室内遊樂場設備
西安戶外遊樂場所安裝哪些遊樂設備合适,随着城市基礎建築的數量越來越多,小區、公園、文化館等場地的建立,也使得戶外遊樂場的需求量增加。戶外遊樂場所安裝哪些遊樂設備合适?這是很多創業者在投資前期都會有所顧慮的一件事情,因為不知道怎樣的設備更合适...
2026-01-13
小米解bl鎖對使用有影響嗎
小米解bl鎖對使用有影響嗎
有時為了線刷小米手機,會進行解BL鎖操作。不過為了保證手機安全性,不影響保修售後,最好重新進行加鎖,今天我就教大家如何為小米手機加BL鎖。1、首先,去MIUI官網下載【解鎖工具包】,并在電腦上解壓;2、将手機關機,按【電源鍵音量下】,進入f...
2026-01-13
老年人如何使用智能手機
老年人如何使用智能手機
科技在不斷進步,智能手機的普及程度也越來越高,大部分情況下并不是手機不好用,而是上了年紀的我們不知道怎麼用,這篇文章我就來說說使用智能手機4個技巧,每一條都很實用,一起來看看:第一,通話錄音随着年齡的增長,我們的記憶力也在逐漸衰退,大部分人...
2026-01-13
Copyright 2023-2026 - www.tftnews.com All Rights Reserved