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>

總結

以上所述是小編給大家介紹的Vue模板語法中數(shù)據(jù)綁定的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！