Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼
更新時(shí)間：2019年05月17日 08:30:44 作者：行走的陽光
這篇文章主要介紹了Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
1.單項(xiàng)數(shù)據(jù)綁定
<div id="di">
<input type="text" :value="input_val">
</div>
<script>
var app = new Vue({
el: '#di',
data: {
input_val: 'hello world '
}
})
</script>
通過瀏覽器 REPL 環(huán)境可以進(jìn)行修改 app.input_val = 'Vue'
我們通過 vue 對象修改數(shù)據(jù)可以直接影響到 DOM 元素，但是，如果直接修改 DOM 元素，卻不會(huì)影響到 vue 對象的數(shù)據(jù)；我們把這種現(xiàn)象稱為 單向數(shù)據(jù)綁定 ；
2.雙向數(shù)據(jù)綁定v-model：
<div id="di">
<input type="text" v-model="input_val" >
</div>
<script>
var app = new Vue({
el: '#di',
data: {
input_val: 'hello world '
}
})
</script>
通過 v-model 指令展示表單數(shù)據(jù)，此時(shí)就完成了 雙向數(shù)據(jù)綁定 ；
不管 DOM 元素還是 vue 對象，數(shù)據(jù)的改變都會(huì)影響到另一個(gè)；
2.1雙向數(shù)據(jù)綁定的應(yīng)用范圍：
文本框 & 文本域
<div id="di">
<textarea v-model="inp_val"></textarea>
<div>{{ inp_val }}</div>
</div>
<script>
var app = new Vue({
el: '#di',
data: {
inp_val: ''
}
})
</script>
綁定復(fù)選框
<div id="di">
吃飯：<input type="checkbox" value="eat" v-model="checklist"><br>
睡覺：<input type="checkbox" value="sleep" v-model="checklist"><br>
{{ checklist }}
</div>
<script>
var vm = new Vue({
el: '#di',
data: { checklist: []
}
});
</script>
綁定單選框
<div id="ap">
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
<br>
{{sex}}
</div>
<script>
var vm = new Vue({
el: '#ap',
data: {
sex: ''
}
});
</script>
總結(jié)
以上所述是小編給大家介紹的Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了element-ui 本地化使用教程詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題
這篇文章主要介紹了vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3沒有this的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
項(xiàng)目開發(fā)中因?yàn)閡i設(shè)計(jì)常常需要修改vue常用的組件庫（element,antD等等）,這就需要用到樣式穿透,下面這篇文章主要給大家介紹了關(guān)于Vue3樣式滲透之deep()為什么無效的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
iview 權(quán)限管理的實(shí)現(xiàn)
本文主要介紹了iview 權(quán)限管理，iview-admin2.0自帶權(quán)限管理?？梢酝ㄟ^設(shè)置路由的meta對象的參數(shù)access來分配權(quán)限。感興趣的可以了解一下2021-07-07
今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時(shí)會(huì)指向window，導(dǎo)致調(diào)用失敗報(bào)錯(cuò)，這篇文章主要介紹了Vue中關(guān)于this指向的問題 ,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue高級特性的相關(guān)知識，文中介紹非常細(xì)致，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06