双向数据绑定

  • 通过修改标签，例：切换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. HTML、CSS笔记（一）

    垂直对齐图像文字 vertical-align:text-top; 图像的顶部与同一行中最高的图像或文本的顶部对齐 <img src="images/cake01.jpg" ...

  2. Docker之Redis保姆级别安装

    Docker之Redis保姆级别安装: 如果觉得样式不好:跳转即可 http://www.lifengying.site/(md文件复制过来有些样式会不一样) 学英语网站项目:自己先保证Redis.N ...

  3. QT控件使用--QPlainTextEdit

    QPlainTextEdit是一个多行文本编辑器,用于显示和编辑多行简单文本. 一些常用的函数有: appendPlainText(const QString) 向 PlainTextEdit 组件添 ...

  4. SpringBoot-集成PageHelper及使用

    1.添加依赖 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId& ...

  5. JS-变量存储

    1.存储(变量)JS中变量是存在栈内存中JS中的内存分两种:栈内存.堆内存 栈内存:存放变量 堆内存:存代码块(object和function) var fn=function()和function ...

  6. signalR从外部服务中推送消息和全局参数的设置

    在前面的章节中,我们都是采用两方模式, 客户端 <-> 服务端,也就是说在这种情况下如果有第三方如果有通知的没有办法插足的,下面解决方案 1:和之前的代码一样,在index页面加一个客户端 ...

  7. shell语法3-expr命令、read命令、echo命令

    一.expr命令(注:常常配合``或者$()来取得所求的值) 1.expr用于求表达式的值:expr 表达式 注意: (1)用空格隔开每一项(2)用反斜杠放在shell特定的字符前面(发现表达式运行错 ...

  8. （已解决）为什么最新版本（v4.3.1）的bootstrap不能使用center-block?

    最新版本4.3.1已经用mx-auto替换center-block,如果仍然想要使用,可以引用3.3.7版本的,https://cdn.staticfile.org/twitter-bootstrap ...

  9. Neo4j权威指南学习笔记第一章

    1.创建图数据库 1.1.创建电影节点 CREATE (TheMatrix:Movie {title:'The Matrix', released:1999, tagline:'Welcome to ...

  10. git 命令 使用记录

    这是ider 在pull 代码是报的异常大概意思是本机有未处理的合并可是点击view files都之前删除的一些文件 这种问题可以使用一下命令 git fetch --all && g ...