Vue基础（2）双向绑定

双向数据绑定

• 通过修改标签，例：切换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>

默认显示：

选择后显示：

---