Vue3表单输入绑定
2023-06-13 09:12:39 时间
tips：
- 在Vue3中，可以使用v-model来绑定表单元素输入内容
- v-model也叫双向绑定，期间数据和表单元素的输出是同步的
- v-model在单选上，会输出input的value，并且不使用name就可以进行分组
- v-model在复选上，代表的是true和false
- v-model在文本域上，代表的是文本内容
- v-model在下拉框上，代表的是option的内容
- v-model的值会覆盖掉原生属性的值
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="michael">
<select v-model="sel">
<option>leo</option>
<option>michael</option>
<option>lancy</option>
</select>
<br/>
<input type="checkbox" v-model="michael" />
{{michael}}
<input v-model="msg" value="abc" />
{{msg}}
<br/>
<textarea v-model="msg"></textarea>
<input v-model="fortext" />
<div>{{getText}}</div>
</div>
<script>
Vue.createApp({
data(){
return {
"fortext":"",
"sel":"michael",
"michael":true,
"msg":"hello"
}
},
"computed":{
getText(){
if(this.fortext.length<6){
return "请输入至少6个字符"
}
else {
return "OK,验证通过！"
}
}
}
}).mount("#michael")
</script>
</body>
</html>
页面效果如下：
【小结】
学习前端技术，就像是在捡煤球，靠的是日积月累。