双向数据绑定

  • 通过修改标签，例：切换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. JavaSE——==与.equal()方法

    ==号的作用 比较基本数据类型:比较的是具体的值 比较引用数据类型:比较的是对象地址值 package com.zhao.stringdemo; public class StringDemo2 { ...

  2. 探索如何在java中执行python脚本

    一个偶然的场景,笔者需要在java代码中执行某个python脚本,并且需要向脚本中传递参数,有可能的话,还要获取该脚本的某些执行结果,回到主程序中继续执行下去. 没有思路之前,狭隘的想法是,java中 ...

  3. Java程序（数组扩容的尝试）

    import java.util.Scanner; public class ArrayAdd { public static void main(String[] args) { int arr[] ...

  4. db2 linux创建用户后，登录报错

    db2的数据库服务器, 创建用户及授权参考 https://blog.csdn.net/qq_24805831/article/details/102590084 按照步骤创建用户后,连接数据库报错: ...

  5. Linux常用命令-文件处理命令一

    命令格式:         命令 [-选项] [参数]           例如: ls -la /etc 说明:         选项--通常是功能         参数--通常是操作对象     ...

  6. gitlab 配置汉化版

    转载 https://blog.csdn.net/qq_44895681/article/details/123277087

  7. 使用JFinal实现简单的学生管理系统

    JFinal简介 Controller是JFinal核按心类美之一,该类作为MVC模式中的控制器.基于JFinal的Web应用的控制器需要继承该类.Controller是定义Action方法的地点,是 ...

  8. 4口高速USB 2.0 HUB控制器 DPU1.1S，兼容替代FE1.1S

    DPU1.1S是一款高性能.低功耗 4 口高速 USB2.0HUB 控制器,上行端口兼容高速 480MHz和全速 12MHz 两种模式,4个下行端口兼容高速480MHz.全速12MHz.低速 1.5M ...

  9. Jenkins安装和自动化部署

    1.Jenkins安装机器安装要求可以参考官网 https://www.jenkins.io 2.下载jenkins的war包上传到linux上部署 3.安装jdk.git.maven 3.1.安装j ...

  10. c# reflect里面的getValue()参数

    Type ty = t.GetType(); PropertyInfo[] PropertyInfo = ty.GetProperties(); string Typename = typeof(T) ...