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