Vue模板语法中数据绑定的实例代码

2019-11-19 11:32:39

字体：大中小

来源：转载

供稿：网友

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模板语法中数据绑定的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：详解微信小程序开发框架（MINA）

下一篇：jQuery控制input只能输入数字和两位小数的方法