首页
/
每日頭條
/
科技
/
vue.js構建
vue.js構建
更新时间:2026-01-29 16:05:37
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
推荐阅读
學生使用塗改帶的壞處
學生使用塗改帶的壞處
2022年上海高考将于後天(7月7日)拉開大幕。往年高考,盡管家長、老師千叮咛萬囑咐,總還是有個别馬大哈考生,達到考點時,才發現準考證或者身份證忘記帶。該帶的沒帶,令人焦心。不該帶入考場的物品,如果點進去了,麻煩也大。比如,按照規定,手機不...
2026-01-29
榮威9502.0t測評
榮威9502.0t測評
【太平洋汽車網新車頻道】近日上汽榮威官方宣布,新款榮威950正式上市,新車搭載2.0T發動機,共推出三款車型。新車售價區間為16.88-20.38萬元。外觀方面,新款榮威950采用榮威最新家族式設計,造型更具層次感的車頭相比老款更具質感。寬...
2026-01-29
常用的三種辦公軟件
常用的三種辦公軟件
1、幕布幕布是一款包含大綱筆記和思維導圖的知識管理工具,幫你用更有效的方式和更清晰的結構來記錄和管理任務,還能制定計劃和組織頭腦風暴。幕布可以将思維以樹形結構方式快速整理,記錄過程簡單,可以将思維真正落地。2、賽凡智雲金融級安全的企業私有雲...
2026-01-29
ps的安裝和界面操作步驟
ps的安裝和界面操作步驟
PS安裝教程下面我給大家安裝PS大家可能覺得會很難其實很簡單,下面我用圖文和文字j教大家如何去安裝。1、我們要PS下好到桌面。這時看你的電腦是多位數的,是32位數的就下32的,是64就下的,下好後把它解壓到桌面。記得安裝的時候不要安裝到C盤...
2026-01-29
電腦硬盤外接供電線可以嗎
電腦硬盤外接供電線可以嗎
挂機電腦上硬盤較多,供電接口不夠,原來在網上買過一轉二的供電線,太亂不說,有時候硬盤還識别不了,估計是轉接線線太垃圾,供電不住原因,索性網上找硬盤15p供電接口,自己來做,這樣質量就有保證了。這次買的是純銅鍍銀線,直徑夠用了,供電接口是那種...
2026-01-29
Copyright 2023-2026 - www.tftnews.com All Rights Reserved