1.單項數據綁定
<div id="di"><input type="text" :value="input_val"></div><script>var app = new Vue({el: '#di',data: {input_val: 'hello world '}})</script> 通過瀏覽器 REPL 環境可以進行修改 app.input_val = 'Vue'
我們通過 vue 對象修改數據可以直接影響到 DOM 元素，但是，如果直接修改 DOM 元素，卻不會影響到 vue 對象的數據；我們把這種現象稱為 單向數據綁定 ；
2.雙向數據綁定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 指令展示表單數據，此時就完成了 雙向數據綁定 ；
不管 DOM 元素還是 vue 對象，數據的改變都會影響到另一個；
2.1雙向數據綁定的應用范圍：
文本框 & 文本域
<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模板語法中數據綁定的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
