微客导航 » 文章资讯 » Vue模板语法中数据绑定的实例代码

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

2023-08-23 10:07:04 160

1.单项数据绑定

通过浏览器REPL环境可以进行修改app.input_val='Vue'

我们通过vue对象修改数据可以直接影响到DOM元素，但是，如果直接修改DOM元素，却不会影响到vue对象的数据；我们把这种现象称为单向数据绑定；

2.双向数据绑定v-model：

通过v-model指令展示表单数据，此时就完成了双向数据绑定；

不管DOM元素还是vue对象，数据的改变都会影响到另一个；

2.1双向数据绑定的应用范围：

文本框&文本域



{{inp_val}}

绑定复选框


吃饭：

睡觉：

{{checklist}}

绑定单选框


男
女


{{sex}}

总结

以上所述是小编给大家介绍的Vue模板语法中数据绑定的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！