Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼
更新時間：2019年05月17日 08:30:44 作者：行走的陽光
這篇文章主要介紹了Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
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 元素，卻不會影響到 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ù)據(jù)綁定 ；
不管 DOM 元素還是 vue 對象，數(shù)據(jù)的改變都會影響到另一個；
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í)例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
這篇文章主要介紹了vue-cli3.0 腳手架搭建項(xiàng)目的過程，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue生命周期區(qū)別詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Axios?是一個簡單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個簡單易用的庫，這篇文章主要介紹了vue3-HTTP請求之a(chǎn)xios,需要的朋友可以參考下2022-12-12
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
vue項(xiàng)目移動端實(shí)現(xiàn)ip輸入框問題
這篇文章主要介紹了vue項(xiàng)目移動端實(shí)現(xiàn)ip輸入框問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
vue項(xiàng)目下,如何用命令直接修復(fù)ESLint報錯
這篇文章主要介紹了vue項(xiàng)目下，如何用命令直接修復(fù)ESLint報錯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3中關(guān)于setup與自定義指令，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04