前言

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

这是本系列第11篇，关于v-model及其修饰符。看文本篇，你将对v-model有个清晰的认识

本系列相关文章如下：

基础类

手写实现类

本文目录结构如下：

v-model基本使用

此处分4点来讲：

1. 基本介绍

1.1 可以使用v-model在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

1.2 本质是监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理

1.3 注意：v-model 会忽略所有表单元素的 value、checked、selected 的初始值，而是总是将当前活动实例的数据作为数据来源

1.4 v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件

2. v-model在不同input类型上的使用

2.1 在类型为文本 (Text)上的使用

<template>
  <input type="text" v-model="name" placeholder="请输入你的名字"/>
  <p v-show="name">我的名字是：{{ name }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
    }
  }
}
</script>

结果如下：

2.2 在类型为单选框 (Radio)上的使用

<template>
  <div>
    <input type="radio" value="man" v-model="picked" />
    <label>男</label>
  </div>
  <div>
    <input type="radio" value="female" v-model="picked" />
    <label>女</label>
  </div>
  <span v-show="picked">选中性别: {{ picked }}</span>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      picked: "",
    };
  },
};
</script>

结果如下：

2.3 在类型为复选框 (Checkbox)上的使用

<template>
  <div>
    <label> <input type="checkbox" v-model="sex" value="male" />男 </label>
    <label> <input type="checkbox" v-model="sex" value="famale" />女 </label
    ><br />
    <p v-show="sex">性取向是：{{ sex }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      sex: [],
    };
  },
};
</script>

结果如下：

3. v-model在textarea中的使用

<template>
  <textarea v-model="article"></textarea>
  <p v-show="article">我写的内容是：{{article}}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      article: '',
    };
  },
};
</script>

结果如下

4. v-model在select中的使用

4.1 单选下拉列表

<template>
  <div>where are you from？</div><br>
  <select v-model="from">
    <option value="1">GUANGZHOU</option>
    <option value="2">BEIJING</option>
  </select>
  <p>{{from}}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      from:''
    };
  },
};
</script>

结果如下

4.2 多选下拉列表

元素身上加个multiple属性，即表示多选

<template>  
  <select v-model="from" multiple>
    <option value="1">GUANGZHOU</option>
    <option value="2">BEIJING</option>
    <option value="4">SHANGHAI</option>
    <option value="5">CHENGDU</option>
  </select>
  <div>where are you want to go？</div>
  {{from}}
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      from:[],
    };
  },
};
</script>

结果如下

v-model的修饰符

.lazy

用于惰性更新

<template>
  <div>
    <h3>没用lazy修饰符时</h3>
    <input type="text" v-model="name" placeholder="你的名字是..." />
    <p v-show="name">我叫{{ name }}</p>
  </div>
  <div>
    <h3>使用用lazy修饰符时</h3>
    <input type="text" v-model.lazy="country" placeholder="你来自哪里..." />
    <p v-show="country">我来自：{{ country }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
      country: ""
    };
  },
};
</script>

结果如下

事实上它是触发了一个change事件

.number

<template>
  <div>
    <h3>没有使用number修饰符</h3>
    <input type="number" v-model="English" placeholder="我的英语成绩..." @change="changedEnglish"/>
    <p v-show="English">我的英语成绩是{{ English }}</p>
  </div>
  <div>
    <h3>使用number修饰符</h3>
    <input type="number" v-model.number="Chinese" placeholder="我语文成绩..." @change="changedChinese"/>
    <p v-show="Chinese">我语文成绩是：{{ Chinese }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      English: '',
      Chinese: ''
    }
  },
  methods:{
    changedEnglish(){
      alert(`没有使用number修饰符，用户输入就算是数字，但它的类型是：${typeof this.English}`);
    },
    changedChinese(){
      alert(`使用number修饰符，用户输入的数字，类型就是：${typeof this.Chinese}`);
    }
  }
};
</script>

结果如下

number修饰符会自动将用户的输入值转为数值类型

如果这个值无法被 parseFloat() 解析，则会返回原始的值

.trim

用于除去首尾空白字符

<template>
  <h4>使用了trim修饰符</h4>
  <input type="text" v-model.trim="msg" @change="changed">
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg:''
    }
  },
  methods:{
    changed(){
      console.log(this.msg);
    }
  }
};
</script>

结果如下

总结

最终还是归结为一句话，v-model本质是一个语法糖，监听用户的输入事件，并及时更新数据

为了方便以后查看，我将所有内容总结为一图

v-model及其修饰符.png

以上就是v-model及其修饰符的所有内容

如有问题，欢迎留言告知，感谢~

END~

v-model双向数据绑定及其修饰符

前言

v-model基本使用

v-model的修饰符

总结