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

v-model指令可以在组件上使用以实现双向绑定,之前学习过v-model绑定文本框和下拉菜单,今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。

一、单行文本框和多行文本框

html 复制代码
<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>
javascript 复制代码
<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>

运行效果如下。

二、单选按钮和下拉菜单

html 复制代码
<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>
javascript 复制代码
<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>

运行效果如下。

三、复选框

html 复制代码
<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>
javascript 复制代码
<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>

运行效果如下。

完整代码如下:

html 复制代码
<!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>
相关推荐
CodeCraft Studio6 分钟前
Excel处理控件Spire.XLS系列教程:C# 合并、或取消合并 Excel 单元格
前端·c#·excel
头顶秃成一缕光17 分钟前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs21 分钟前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
Three~stone21 分钟前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦32 分钟前
HTML 音频(Audio)学习笔记
学习
木木黄木木33 分钟前
HTML5图片裁剪工具实现详解
前端·html·html5
念九_ysl35 分钟前
基数排序算法解析与TypeScript实现
前端·算法·typescript·排序算法
海石35 分钟前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
uhakadotcom1 小时前
Vite 与传统 Bundler(如 Webpack)在 Node.js 应用的性能对比
前端·javascript·面试
瞌睡不来1 小时前
(学习总结32)Linux 基础 IO
linux·学习·io