首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-20 20:25:45
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
推荐阅读
支付寶理财顯示昨日收益有多高
支付寶理财顯示昨日收益有多高
支付寶理财,裡面可謂是包羅萬象,從銀行定期理财到養老保險理财再到各類基金全部都有,讓人眼花缭亂。特别支付寶又經常搞各種各種的優惠券,抵用券等更是讓人欲罷不能,讓人忍不住的越投越多,那麼,支付寶理财收益到底有多高,到底有多神奇,這裡老韭菜用實...
2026-01-20
開關電源給哪些元器件提供電源
開關電源給哪些元器件提供電源
開關電源給哪些元器件提供電源?我們大家都知道,在外加電流陰極保護的系統中,為了可以更好的提供保護電流,此時就需要有一個穩定的直流電源一般廣泛使用的有整流器和恒電位儀兩種當被保護的結構物所處的工況條件基本不變或變化很小時,可以采用手動控制的整...
2026-01-20
福田綠色商用車
福田綠色商用車
2017年8月5日,福田輕型商用車2017年中商務會在青島拉開序幕,會議現場不僅舉行了“福田圖雅諾精英達人賽”7月冠軍頒獎儀式,與此同時,奧鈴EV純電動超級輕卡/奧鈴TS超級輕卡、奧鈴T3(3400軸距)新品、圖雅諾EV純電動物流車、風景4...
2026-01-20
dell 7140怎麼裝系統
dell 7140怎麼裝系統
概述平時,我們在安裝戴爾主機Dell5050和Dell7040時,容易出現使用U盤安裝不了操作系統的問題,主要是驅動引起的。說明:DELL5050、Dell7040主機,如果用PE從硬盤安裝的系統,出現的部分問題,可以用U盤重新安裝下系統;...
2026-01-20
手機怎麼掃描身份證
手機怎麼掃描身份證
手機怎麼掃描身份證?通過支付寶APP,要說現在支付寶的功能非常全面,打開它以後找到“卡包”,然後即可看到“添加證件”選項了,現在小編就來說說關于手機怎麼掃描身份證?下面内容希望能幫助到你,我們來一起看看吧!手機怎麼掃描身份證通過支付寶APP...
2026-01-20
Copyright 2023-2026 - www.tftnews.com All Rights Reserved