双向数据绑定

  • 通过修改标签，例：切换radio、checkbox......都会对绑定的数据有影响
  • 通过事件触发方法，修改data中数据，反向作用于radio、checkbox......

1、v-model

（1）通过绑定input实现双向绑定

</head>

<body>

    <div id="app">

        <!-- div、input标签同时绑定data中input_value  -->

        <div>{{input_value}}</div>

        <div>{{input_value}}</div>

        <input type="text" v-model="input_value">

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              input_value:'default'

          }

      })

</script>

</body>

打开前端页面默认显示：

输入框重新输入后显示：

我们可以看出，当输入框的值变动时，同时绑定了“input_value”的div、input标签一起在同时变动，所以是当input框输入时，产生了联动

（2）通过button点击实现双向绑定

<body>

    <div id="app">

        <!-- div、input标签同时绑定data中input_value  -->

        <div>{{input_value}}</div>

        <input type="text" v-model="input_value">

       <!-- 绑定change  -->

        <input type="button" value="change" @click="change">

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              input_value:'default'

          },

          methods:{

              change:function () {

                  this.input_value = 'change value'

          }

          }

      })

</script>

</body>

点击【change】前：

点击【change】后：

（3）通过radio进行双向绑定

<body>

    <div id="app">

        <div>{{sex}}</div>
        // 绑定sex,默认是1，会默认勾选男

        <input type="radio" value="1" name="sex" v-model="sex">男

        <input type="radio" value="2" name="sex" v-model="sex">女

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              input_value:'default',

              sex:1

          },

          methods:{

              change:function () {

                  this.input_value = 'change value'

          }

          }

      })

</script>

</body>

默认显示：

点击【女】时显示：

（4）通过checkbox实现双向数据绑定

  • value配置成 [ ] 用于存储选择的多个数据
<body>

    <div id="app">

         <div>{{movies}}</div>
        //勾选后，会取值到【input标签】的value的值

        <input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠

        <input type="checkbox" value="复仇者联盟" v-model="movies">复仇者联盟

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              movies:[]
              movies:['钢铁侠']

          },

          methods:{

          }

      })

</script>

</body>

默认展示：

勾选后显示：

data中的movies:['钢铁侠']时，默认显示：

我们可以看出，勾选后，input中的value值是同步到了list中

<body>

    <div id="app">

         <div>{{movie}}</div>

        <select v-model="movie">

            <option value="钢铁侠">钢铁侠</option>

            <option value="复仇者联盟">复仇者联盟</option>

        </select>

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              movie:'',

              // movie:'钢铁侠'

          },

          methods:{

          }

      })

</script>

</body>

（5）通过下拉框option实现双向绑定

  • value 配置成 str
<body>

    <div id="app">

        <div>{{movie}}</div>

        <select v-model="movie">

           <!--下拉框默认显示 -->

            <option disabled value="">请选择</option>

            <option value="钢铁侠">钢铁侠</option>

            <option value="复仇者联盟">复仇者联盟</option>

        </select>

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              // movie:'',

              movie:'钢铁侠'

          },

          methods:{

          }

      })

</script>

</body>
  • movie值为空时默认显示：

  • movie值为‘钢铁侠’时显示：

  • movie值为空，添加<option disabled value="">请选择</option>后，默认显示：

  • 下拉框操作后显示：

  • 多选下拉框双向绑定
<body>

    <div id="app">

        <span>请选择你喜欢的电影：{{selectMovie}}</span><br>

        <select v-model="selectMovie" multiple size="4">

           <!--下拉框默认显示 -->

            <option disabled value="">请选择</option>

            <option value="变形金刚">钢铁侠</option>

            <option value="复仇者联盟">复仇者联盟</option>

            <option value="头号玩家">头号玩家</option>

        </select>

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              selectMovie:'',

          },

          methods:{

          }

      })

</script>

</body>

默认显示：

选择后显示：

  • 动态值绑定

<body>

    <div id="app">

        <span>请选择你喜欢的电影：{{Movie}}</span><br>
        //"Movie"双向数据绑定”，和data中“Movie”进行了关联

        <select v-model="Movie">

           <!--下拉框默认显示 -->

            <option disabled value="">请选择</option>

          <!--循环后option中的值为：{"name":"变形金刚","id":1}等3个;value:不加v-bing取值的是字符串，加上后，才会是取值的option的id-->

            <option v-for="option in options" v-bing:value="option.id">{{option.name}}</option>

        </select>

    </div>

<script src="../js/vue.js"></script>

<script>

      new Vue({

          el:'#app',

          data:{

              Movie:'',
              // id:可以理解为后台对“变形金刚”录入的主键ID

              options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"头号玩家","id":3}],

          },

          methods:{

          }

      })

</script>

</body>

默认显示：

选择后显示：

Vue基础（2）双向绑定的更多相关文章

  1. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  2. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  3. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  4. 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  5. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  6. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  7. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  8. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  9. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  10. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. 通过pxelinux引导管理器网络引导slax linux

    前提条件 1.用于引导服务器具备tftp服务和http服务: 2.使用syslinux项目下lpxelinux.0做为pxe引导文件,原因:测试发现lpxelinux.0对http协议支持更好,可以更 ...

  2. SpringBoot容器化的多环境配置

    SpringBoot容器化的多环境配置 部署通常会有多个环境,如"dev"/"test"/"prod"等环境 容器化部署通常使用环境变量,而 ...

  3. 容器之 docker的监控平台（prometheus + Grafana）

    cAdvisor (Container Advisor) :用于收集正在运行的容器资源使用和性能信息.https://github.com/google/cadvisor Prometheus(普罗米 ...

  4. React自定义组件参数小驼峰命名提示警告 Warning: React does not recognize the `xxXxx` prop on a DOM element.

    Warning: React does not recognize the `xxXxx` prop on a DOM element. If you intentionally want it to ...

  5. 如何修改驱动使得NVIDIA Geforce GTX 970, 980, 980 TI and Titan X等显卡可以在Win XP/Win 2003 server x64下驱动？

    感谢Matt,一个老外,非常好的修改方法. 本人亲测成功. I recently built a new computer to better accommodate the forthcoming ...

  6. 【azw3】麻省理工深度思考法：从模型及动力机制来思考现象

    书本详情 标题:麻省理工深度思考法:从模型及动力机制来思考现象作者:[日]平井孝志 著:张玉虹 译年份:2018出版社:北京:中国华侨出版社ISBN:9787511373441,7511373445格 ...

  7. 搭建 springboot 应用

    一.采用 Spring Initializr 搭建springboot应用 步骤: 1.只需要打开网址: https://start.spring.io/: 2.选择使用 Maven 构建,语言 ja ...

  8. flutter SafeArea和SliverSafeArea，适应特殊屏幕

    现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了. 因此SafeArea控件应用而生,SafeArea通过 ...

  9. NEO4J入门基础第二章

    1.简单导入CSV数据 Load CSV读取但不存入数据库: 查看前CSV文件行数 LOAD CSV FROM "file-url" AS line RETURN count(*) ...

  10. 用C++写的文件字符数、单词数以及总行数的统计（源码）

    #include <stdio.h> #include <fstream> #include <string> using namespace std; //计算单 ...