v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。
一、单行文本框和多行文本框
<p>1.单行文本框</p>
用户名:<input type="text" v-model="inputMessage">
<p>您的用户名是：{{inputMessage}}</p>
<p>2.多行文本框</p>
<textarea v-model="textMessage" placeholder="请留言" rows="4" cols="80"></textarea>
<p>您的留言是：{{textMessage}}</p>
<script type="text/javascript">
const RootComp = { //创建根组件
data() {
return {
inputMessage: '',
textMessage: '',
}
}
}
const vueApp = Vue.createApp(RootComp) //创建Vue应用实例
const vm = vueApp.mount("#app") //挂载vueApp
console.log(vm.$data.inputMessage) //输出data函数定义的inputMessage属性值
</script>
运行效果如下。
二、单选按钮和下拉菜单
<p>3.单选按钮</p>
<input type="radio" name="certificate" value="高" v-model="level"> 高级
<input type="radio" name="certificate" value="中" v-model="level"> 中级
<input type="radio" name="certificate" value="初" v-model="level"> 初级
<p>证书级别是：{{level}}</p>
<p>4.下拉菜单</p>
所在城市：
<select v-model="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<p>所在城市是：{{city}}</p>
<script type="text/javascript">
const RootComp = { //创建根组件
data() {
return {
level: '高',
city: '',
}
}
}
const vueApp = Vue.createApp(RootComp) //创建Vue应用实例
const vm = vueApp.mount("#app") //挂载vueApp
console.log(vm.$data.inputMessage) //输出data函数定义的inputMessage属性值
</script>
运行效果如下。
三、复选框
<p>5-1.复选框</p>
<div>
字节跳动：
<input type="checkbox" v-model="byteDance" value="抖音">抖音
<input type="checkbox" v-model="byteDance" value="西瓜视频">西瓜视频
<input type="checkbox" v-model="byteDance" value="今日头条">今日头条
<p>选中的复选框数量：{{ byteDance.length }}</p>
<p>选中的复选框项：{{ byteDance }}</p>
</div>
<p>5-2.复选框(使用 v-for)生成复选框</p>
<div>
业余爱好：
<label v-for="item in checks" :key="item.id">
<input type="checkbox" v-model="checkOptions" :value="item.name">
{{ item.name }}
</label>
<p>选中的复选框数量：{{ checkOptions.length }}</p>
<p>选中的复选框项：{{ checkOptions }}</p>
</div>
<script type="text/javascript">
const RootComp = { //创建根组件
data() {
return {
byteDance:[],
checks: [
{ id: 1, name: '游泳' },
{ id: 2, name: '网球' },
{ id: 3, name: '滑板' }
],
checkOptions: [],
}
}
}
const vueApp = Vue.createApp(RootComp) //创建Vue应用实例
const vm = vueApp.mount("#app") //挂载vueApp
console.log(vm.$data.inputMessage) //输出data函数定义的inputMessage属性值
</script>
运行效果如下。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model绑定input、textarea、radio、select、checkbox</title>
<!--引入vue库-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"> <!--挂载点-->
<p>1.单行文本框</p>
用户名:<input type="text" v-model="inputMessage">
<p>您的用户名是：{{inputMessage}}</p>
<p>2.多行文本框</p>
<textarea v-model="textMessage" placeholder="请留言" rows="4" cols="80"></textarea>
<p>您的留言是：{{textMessage}}</p>
<p>3.单选按钮</p>
<input type="radio" name="certificate" value="高" v-model="level"> 高级
<input type="radio" name="certificate" value="中" v-model="level"> 中级
<input type="radio" name="certificate" value="初" v-model="level"> 初级
<p>证书级别是：{{level}}</p>
<p>4.下拉菜单</p>
所在城市：
<select v-model="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<p>所在城市是：{{city}}</p>
<p>5-1.复选框</p>
<div>
字节跳动：
<input type="checkbox" v-model="byteDance" value="抖音">抖音
<input type="checkbox" v-model="byteDance" value="西瓜视频">西瓜视频
<input type="checkbox" v-model="byteDance" value="今日头条">今日头条
<p>选中的复选框数量：{{ byteDance.length }}</p>
<p>选中的复选框项：{{ byteDance }}</p>
</div>
<p>5-2.复选框(使用 v-for)生成复选框</p>
<div>
业余爱好：
<label v-for="item in checks" :key="item.id">
<input type="checkbox" v-model="checkOptions" :value="item.name">
{{ item.name }}
</label>
<p>选中的复选框数量：{{ checkOptions.length }}</p>
<p>选中的复选框项：{{ checkOptions }}</p>
</div>
</div>
</body>
<script type="text/javascript">
const RootComp = { //创建根组件
data() {
return {
inputMessage: '',
textMessage: '',
level: '高',
city: '',
byteDance:[],
checks: [
{ id: 1, name: '游泳' },
{ id: 2, name: '网球' },
{ id: 3, name: '滑板' }
],
checkOptions: [],
}
}
}
const vueApp = Vue.createApp(RootComp) //创建Vue应用实例
const vm = vueApp.mount("#app") //挂载vueApp
console.log(vm.$data.inputMessage) //输出data函数定义的inputMessage属性值
</script>
</html>
