Day18——v-model双向绑定

最新推荐文章于 2022-11-08 00:17:57 发布

Android_la

最新推荐文章于 2022-11-08 00:17:57 发布

阅读量301

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107412324

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. v-mode双向绑定

一. 回顾

前面学习了Day17——JavaSrcipt高阶函数的使用，今天学习v-model双向绑定

二. v-mode双向绑定

2.1 v-model的基本使用

语法：v-model="变量"

例子：

<body>
<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>

2.2 v-model的原理

其实v-model是一个语法糖。它实际包含两个操作：

使用v-bind绑定一个value属性
使用v-on给当前元素添加一个input事件

<body>
<div id="app">
  <!--<input type="text" v-model="message">-->
  <!--<input type="text" v-bind:value="message" v-on:input="valueChange">-->
  <!-- 使用语法糖写法-->
  <!--<input type="text" :value="message" @input="valueChange">-->
  <!-- $event是一个事件对象-->
  <input type="text" :value="message" @input="message = $event.target.value">

  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;//发生事件的元素的值 赋给 message变量
      }
    }
  })
</script>
</body>

2.3 v-model结合radio类型

<body>
<div id="app">
  <label for="male">
    <!-- 双向绑定是将某控件的值绑定到Vue管理的变量中。只要v-mode绑定的是同一个变量，那么input标签可以没有name属性-->
    <!--<input type="radio" id="male" name="sex" value="男" v-model="sex">男-->
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>
  <label for="female">
   <!-- <input type="radio" id="female" name="sex" value="女" v-model="sex">女-->
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: ''
    }
  })
</script>
</body>

2.4 v-model结合checkbox类型

<body>
  <div id="app">

    <!--单选框的场景-->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您的选择是{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <br>
    <br>
    <br>
    <!-- checkbox多选框的场景-->
      <input type="checkbox" value="篮球" v-model="hobbies">篮球
      <input type="checkbox" value="足球" v-model="hobbies">足球
      <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
      <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <h2>您的爱好是{{hobbies}}</h2>

    <br>
    <label v-for="item in originHobbies" for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好是{{hobbies}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isAgree: false, //单选框对应布尔值
        hobbies: [], //多选框对应数组
        originHobbies: ['篮球', '足球', '羽毛球', '乒乓球'],
      }
    })
  </script>
</body>

效果：
在这里插入图片描述

2.5 v-model结合select类型

例子：

<body>
<div id="app">
  <!-- select 选择一个-->
  <select name="fruit" id="fruit" v-model="fruit">
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="榴莲" >榴莲</option>
    <option value="荔枝" >荔枝</option>
  </select>
  <h2>您的选择是：{{fruit}}</h2>
  <br>
  <!-- select 选择多个-->
  <select name="fruits" id="fruit2" v-model="fruits" multiple>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="榴莲" >榴莲</option>
    <option value="荔枝" >荔枝</option>
  </select>
  <h2>您的选择是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '苹果', //设置值，表示默认选中value=‘苹果’
      fruits: [],

    }
  })
</script>
</body>

2.6 v-model修饰符的作用

修饰符	作用
lazy	v-model默认在input事件中同步输入框的数据，即一旦数据发生变化，vue实例的data属性中的数据也会自动发生改变。lazy的作用就是只有当失去焦点或者按下回车键时才会更新
number	在输入框中无论输入数字还是字符串，都会被当作字符串进行处理。如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理。number的作用就是将输入框的内容自动转换成数字类型
trim	作用是将输入的内容的首尾若干个空格都去除

例子：

<body>
<div id="app">
  <!-- 修饰符：lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!-- 修饰符：number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

   <!-- 修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字是：{{name}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: '',
    }
  })
</script>
</body>

2.7 总结

如果绑定的是多个数据，则需要使用数组，即v-model="xxx"（其中xxx是一个数组类型的变量）；如果绑定的是单个数据，则只需使用一个变量，即v-model="xxx"（其中xxx是一个简单的变量）
v-model的使用就是，创建一个数组或者简单的变量，触发元素的input事件后，会自动将元素的value属性的值绑定到前面创建好的数组或变量中。