Vue中双向绑定数据详解

冷丁_

于 2022-08-12 20:53:56 发布

阅读量1k

点赞数 2

分类专栏： Vue精华讲解文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41359998/article/details/122869404

版权

Vue中双向绑定数据详解

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓。

你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

对v-model的理解
v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input。
v-model详解

接下来我们对各个组件都测试一遍双向数据绑定

1.文本框
data.html

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

<!--view层 模版-->
<div id="app">
<!--  v-bind：value只能进行单向对数据渲染-->
    <input type="text" v-bind:value="searchMap.keyWord">
<!--    v-model 可以进行双向对数据绑定-->
    <input type="text" v-model:type="searchMap.keyWord">
    <p>您要查询的是:{
  {searchMap.keyWord}}</p>
</div>
<script>
    var vm=new Vue({
     
        el:"#app",
        //model：数据
        data:{
     
            searchMap:{
     
                keyWord:'lengding'
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述
测试可以观察到，当在第一个文本框中输入数据的时候，其他两个位置的数据不会改变，这三个位置其实都是获得data中searchMap中的keyWord属性，当修改第二个输入框中的值时，三个数据会一起跟着变

2.单复选框
data.html

<!DOCTYPE html>

最低0.47元/天解锁文章

冷丁_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中双向绑定数据详解

Vue中双向绑定数据详解Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓。你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。对v-model的理解v-model本质上是一个语法糖。如下代码本质上是<input :
复制链接

扫一扫

专栏目录