首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-11 16:44:42
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-11
華為手機怎麼剪輯視頻
華為手機怎麼剪輯視頻
華為手機怎麼剪輯視頻?打開華為手機的視頻,選中其中需要剪輯的視頻,點擊創作,現在小編就來說說關于華為手機怎麼剪輯視頻?下面内容希望能幫助到你,我們來一起看看吧!華為手機怎麼剪輯視頻打開華為手機的視頻,選中其中需要剪輯的視頻,點擊創作在創作下...
2026-01-11
遠程控制電腦的軟件哪些好用
遠程控制電腦的軟件哪些好用
會用電腦的你有沒有被影視劇中電腦高手的技術所折服,他們可以輕而易舉地控制遠在萬裡之外的電腦,你是不是也夢想着自己也能有這神通廣大的“本領”?那麼小G今天給大家分享一個可以遠程控制電腦的簡單方法,從此你也可以在家操作自己單位的工作電腦,覺得有...
2026-01-11
電競顯示器從哪裡看配置
電競顯示器從哪裡看配置
十大功能參數詳解,适合自己的最重要用過卓威顯示器的玩家很大一部分都有一個疑惑:我XX型号顯示器,玩XX遊戲到底用什麼參數?不論推薦的參數如何,每個人對于畫面的要求都不盡相同,自然不可能滿足所有人的要求。最好的辦法就是自己能夠理解這些參數的效...
2026-01-11
如何制作好短教程
如何制作好短教程
如何制作受歡迎的短視頻,四個小技巧要牢記,小白也能輕松掌握短視頻其實就是用最短的時間說出作者想要說的事,也正是因為時間短,所以很多人都以為制作短視頻其實非常的簡單,但其實不然。那麼,如何才能制作出一條受歡迎的短視頻呢?五個小技巧要牢記,小白...
2026-01-11
Copyright 2023-2026 - www.tftnews.com All Rights Reserved