VUE3.x（v-model）数据双向绑定指令
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE3.x（v-model）数据双向绑定指令相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- v-model双向绑定 -->
<div id="app">
<p>{{ name }}</p>
<!-- 1单行文本框 -->
<!-- <input type="text" :value="name" @input="name=$event.target.value" /> -->
<input type="text" v-model="name">
<!-- 2单选按钮 -->
<input type="radio" value="male" v-model="sex">男
<input type="radio" value="female" v-model='sex'>女
<input type="radio" value="zhong" v-model="sex">中
<!-- 3复选框 -->
<input type="checkbox" value="programming" v-model="hobbies">编程
<input type="checkbox" value="movie" v-model="hobbies">电影
<input type="checkbox" value="sports" v-model="hobbies">运动
<!-- 4、下拉列表 -->
<select name="" id="">
<option value="0">--请选择大专学历--</option>
<option value="1">研究生</option>
<option value="2">本科</option>
<option value="3">大专</option>
</select>
<!--
修饰符
(.num)数据转化为数值类型，如果无法转换返回字符串
.lazy 默认使用input事件，可以使用change事件（失去焦点）
.trim 去除俩侧的空格
-->
<input type="text" v-model.number.lazy="num">
<input type="text" v-model.trim="name">
</div>
<script>
Vue.createApp({
data(){
return {
name:'tom',
sex:'male',
hobbies:[],
degree:2,
num:6
}
}
}).mount("#app")
</script>
</body>
</html>
以上是关于VUE3.x（v-model）数据双向绑定指令的主要内容，如果未能解决你的问题，请参考以下文章