Vue双向绑定详解

目录

• 1、双向绑定
• 2、那么其它标签选中会不会也有这个结果，答案当然是有：
• 3、我们再来看一个：
• 4、注意
• 总结

1、双向绑定

双向绑定就是 你们前端数据改变 你们data中的数据也会改变，同样的，你们data中的数据改变了 前端页面中的数据也同样会发生改变，而且，这个过程是不需要刷新的。

    
    



    
    输入文本：{{message}}

 

 

运行结果：

data中的数据改变了 前端页面中的数据也同样会发生改变，如下所示：

前端数据改变 你们data中的数据也会改变

如下所示：

2、那么其它标签选中会不会也有这个结果，答案当然是有：

    
    



    性别：
     男
     女
    
你的性别是：{{message}}

 

 

运行结果：

3、我们再来看一个：

    
    



    
        --请选择--
        男
        女
    
    你的选择：{{select}}

 

 

运行结果：

4、注意

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过JavaScript 在组件的data选项中声明初始值！！！

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!