Vue-学习笔记-08 v-model详解

一、v-model简介二、v-model基本使用三、v-model的原理四、v-model 结合radio类型使用五、v-model 结合checkbox类型使用六、v-model配合select使用六、修饰符6.1 .lazy(懒惰)修饰符：6.2 .number修饰符：6.3 .trim修饰符：

优雅哥cc

8319人浏览 · 2020-07-26 00:47:32

优雅哥cc · 2020-07-26 00:47:32 发布

文章目录

一、v-model简介
二、v-model基本使用
三、v-model的原理
四、v-model 结合radio类型使用
五、v-model 结合checkbox类型使用
六、v-model配合select使用
六、修饰符

一、v-model简介

在这里插入图片描述
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。

预期：随表单控件类型不同而不同。
限制：
<input>
<select>
<textarea>
components

二、v-model基本使用

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

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

三、v-model的原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<body>
  <div id='app'>
    <!-- <input type="text" v-model="message"> -->

    <!-- 双向数据绑定的原理实际上是 两个指令 绑定value和监听输入 -->
    <!-- <input type="text" :value="message" v-on:input="valueChange"> -->

    <input type="text" :value="message" @input="message = $event.target.value">

    <h2>{{message}}</h2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        message:'test'
      },
      methods: {
        valueChange:function(event){
          this.message = event.target.value
        }
      },
    })
  </script>
</body>

一样可以实现同样的效果。

四、v-model 结合radio类型使用

知识点：

使用了 v-model过后可以去掉 name属性，一样可以起到互斥效果。
对双向数据绑定的值设置默认值可以设置默认选中，这里我的默认值为Girl 所以默认选中女。

<body>
  <div id='app'>
    <label>
      男:<input type="radio" v-model="sex" value='Boy'>
    </label>
    <label>
      女:<input type="radio" v-model="sex" value="Girl">
    </label>
    <h2>您选择的性别是：{{sex}}</h2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        message:'test',
        sex:'Girl'
      },
    })
  </script>
</body>

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

五、v-model 结合checkbox类型使用

<body>
  <div id='app'>
    <!--复选框 -->
    <label>
      篮球<input type="checkbox" v-model="hobbies"  value="篮球">
    </label>
    <label>
      足球<input type="checkbox" v-model="hobbies"  value="足球">
    </label>
    <label>
      乒乓球<input type="checkbox" v-model="hobbies"  value="乒乓球">
    </label>
    <label>
      羽毛球<input type="checkbox" v-model="hobbies"  value="羽毛球">
    </label>
    <label>
      橄榄球<input type="checkbox" v-model="hobbies"  value="橄榄球">
    </label>
    <h2>您的爱好是:{{hobbies}}</h2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        hobbies:[]
      },
    })
  </script>
</body>

效果：
在这里插入图片描述
怎么样，是不是相当的舒服？

六、v-model配合select使用

<body>
  <div id='app'>
    <!-- 1.选择一个 -->
    <select v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="李子">李子</option>
      <option value="榴莲">榴莲</option>
    </select>
    <h2>您选择的水果是:{{fruit}}</h2>


    <!-- 2.选择多个 -->
    <select v-model="fruits" name="test" multiple >
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="李子">李子</option>
      <option value="榴莲">榴莲</option>
    </select>
    <h2>您选择的水果是:{{fruits}}</h2>

    <!-- 值绑定 值是动态去获取的-->
    <label v-for="item in originHobbies">
      {{item}}<input type="checkbox" v-model="hobbiesArr" :value='item'>
    </label>
    <h2>您的爱好是:{{hobbiesArr}}</h2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        fruit:'香蕉',
        fruits:[],
        hobbiesArr:[],
        originHobbies:['篮球','足球','橄榄球','乒乓球','网球','羽毛球']   
      },
    })
  </script>
</body>

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

是不是很简单呢？

六、修饰符

6.1 .lazy(懒惰)修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新：

6.2 .number修饰符：

v-model默认给变量赋值的时候，都是string类型
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型：

6.3 .trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除.

trim修饰符可以过滤内容左右两边的空格

三个的实例代码：

<body>
  <div id='app'>
    <!-- 1.lazy(懒惰) 修饰符  -->
    <!-- 敲回车或者失去焦点才触发 -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>

    <!-- 2 .number 修饰符 -->
    <!-- 把输入的数据转化为数值类型 -->
    <input type="number" v-model.number="age">
    <h2>{{typeof age}}</h2>

    <!-- 3 .trim 去除字符串左右两边的空格 -->
    <input type="text" v-model.trim="str">
    <h2>您输入的字符串是:{{str}}</h2>
  </div>
  
  <script src='../js/vue.js'></script>
  <script>
    let vm = new Vue({
      el:'#app',
      data:{
        message:'test',
        age:0,
        str:''
      },
    })
  </script>
</body>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^