这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！
这是关于v-model及其修饰符。看文本篇，你将对v-model有个清晰的认识
本文目录结构如下：
image.png
v-model基本使用
此处分4点来讲：
image.png
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>
结果如下：
1.gif
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.gif
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.gif
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.gif
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>
结果如下
5.gif
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>
结果如下
6.gif
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>
结果如下
7.gif
事实上它是触发了一个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>
结果如下
8.gif
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>
结果如下
9.gif
以上就是v-model及其修饰符的所有内容
如有问题，欢迎留言告知，感谢~
END~
为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map
