首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-02-01 13:40:12
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
推荐阅读
蘋果的20瓦快充到底有多快
蘋果的20瓦快充到底有多快
稿源:充電頭網蘋果2022年秋季新品發布會比往年提早了一個星期,但依舊是淩晨1點準時進行,此次發布會帶來了全新iPhone14系列,重塑的AirPodsPro以及三款新AppleWatch。耳機、手表就不細說了,主要還是來聊聊最新的iPho...
2026-02-01
蹲便器水箱一般安裝在什麼位置
蹲便器水箱一般安裝在什麼位置
在家庭裝修時我們總會遇到大大小小各種問題,對于熟練的有經驗的裝修師傅來說,他們能夠輕松的解決,但是對于大部分用戶來說可就不一定了。例如我們面對複雜的蹲便器水箱該如何進行安裝呢?在這裡康麗潔衛浴給您介紹下蹲便器水箱安裝方法詳解。(本文對新家裝...
2026-02-01
vivox20手機夜間模式在哪裡
vivox20手機夜間模式在哪裡
vivox20手機夜間模式在哪裡?首先vivo手機目前是沒有夜間模式設置功能選項,我來為大家科普一下關于vivox20手機夜間模式在哪裡?以下内容希望對你有幫助!vivox20手機夜間模式在哪裡首先vivo手機目前是沒有夜間模式設置功能選項...
2026-02-01
ug編程後處理在哪看代碼
ug編程後處理在哪看代碼
很多小夥伴都在問我關于後處理的各種知識。所以小編在這也到處找了好多資料分享給大家,期望對大家有幫助吧,下面我們就來分享一下關于UG添加後處理文件的小方法吧!對于一些新手來說,可能都不知道什麼是後處理。簡單的來說,後處理就是把我們在軟件中編寫...
2026-02-01
制冷系統的工作原理圖
制冷系統的工作原理圖
對于很多小夥伴來講,以為制冷系統僅僅可以用來做空調系統,其實太小看制冷制冷系統了,今天我們就來看看制冷系統還有那些運用吧。一、空調系統首先就是空調系統的運用了。相信小夥伴閉上眼睛就能說出原理來二、冰箱系統冰箱系統也是制冷系統最常見的運用,來...
2026-02-01
Copyright 2023-2026 - www.tftnews.com All Rights Reserved