首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2025-12-17 17:11:58
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℃最合适。除了調溫度之外,注意以下幾項,讓空調制熱效率更高。1、向下吹風:熱空氣較輕,空調向下吹風,熱空氣吹出後自然上升,從而使整個房間變得溫暖,供暖效率大大提高。2、不要頻繁開關:...
2025-12-17
顯示器接口都有哪些
顯示器接口都有哪些
顯示器接口有VGA、DVI、HDMI三種類型。1、VGA接口是一種通用接口,自CRT時代起就已采用。它是一種色差模拟傳輸接口,D型端口,有15個孔分别傳輸不同的信号。另外,VGA接口也叫D-Sub接口...
2025-12-17
表格中怎麼排序号123456
表格中怎麼排序号123456
電腦:ThinkPad翼14Slim,系統:window10,軟件:excel2020。在表格中排序号的具體操作步驟如下:1、打開表格,并在表格中豎向打出數字,全部選中要排序的數字。2、點擊工具欄中的...
2025-12-17
蘋果一體機開機鍵在哪
蘋果一體機開機鍵在哪
電腦:imac,系統:window10。蘋果一體機的開機鍵在背後右下角。蘋果一體機按下開機鍵後沒有反應的具體原因以及解決方法。1、故障現象:開機後屏幕無顯示,聽不到主闆音箱的滴聲。故障分析:主闆芯片内...
2025-12-17
學生中常見的心理健康問題有哪些
學生中常見的心理健康問題有哪些
第一、關于學習關于學習産生的一些問題,是學生中最主要、最易出現的問題,有的學生面對沉重的學習壓力,有些力不從心,從心裡恐懼和抵觸學習,有的學生平時還可以,一到考試就情緒緊張、甚至生病,有的甚至産生厭學心理。第二、關于交往有的孩子對某科目不喜歡,時間長了,老師對孩子會産生偏見,造成孩子對老師有意見,甚至産生對抗情緒,當面頂撞老師。有的則是同學間的不團結,不能和睦和同學相處,或是被同學孤立、欺負。在家
2025-12-17
Copyright 2023-2025 - www.tftnews.com All Rights Reserved