Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等

本文主要是介绍Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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")             //挂载vueAppconsole.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")             //挂载vueAppconsole.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")             //挂载vueAppconsole.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")          //挂载vueAppconsole.log(vm.$data.inputMessage)       //输出data函数定义的inputMessage属性值 
</script></html>