Vue(6) —— Vue中数据的双向绑定

最新推荐文章于 2024-04-22 09:07:57 发布

原来是小别扇

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量279

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jzandth/article/details/108768654

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.什么是双向数据绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js 的精髓之处了
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定；单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突

2.为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作

3.在表单中使用双向数据绑定

你能够用 v-model 指令在表单 input、textarea 及 select 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
注意：v-model 会忽略全部表单元素的 value、checked、selected 特性的初始值而老是将 Vue 实例的数据做为数据来源，即只要这个元素里面使用的v-model进行了数据的双向绑定，那么这个元素显示的值只会是{{}}中的值，而会忽略我们在元素中设置的value、checked、selected 属性

Vue使用模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
       
    </div>

    <script>
        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
    </script>
</body>
</html>

input输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
        请输入信息：<input type="text" value="click me" v-model="message"> -- {{message}}
    </div>

    <script>

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{
                message:""
            },
            methods:{},

        });
    </script>
</body>
</html>

在这里插入图片描述

测试

textarea 文本域

单选框
下拉框

注意：如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项；因为这样的情况下，iOS不会触发change事件，因此，更推荐像上图这样提供一个值为空的禁用选项(option disabled value="")

原来是小别扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(6) —— Vue中数据的双向绑定

1.什么是双向数据绑定Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js 的精髓之处了值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定；单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突2.为什么要实现数据的双向绑定在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是
复制链接

扫一扫