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

来源：动视网责编：小采时间：2020-11-27 21:56:44

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

Vue模板语法中数据绑定的实例代码:1.单项数据绑定 <div id=di> <input type=text :value=input_val> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) <

推荐度：

点击下载本文 文档为doc格式

导读Vue模板语法中数据绑定的实例代码:1.单项数据绑定 <div id=di> <input type=text :value=input_val> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) <

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

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

推荐度：

点击下载本文 文档为doc格式

标签：绑定数据 VUE

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐