Vue框架--表单元素默认被选中

最新推荐文章于 2025-06-22 16:10:58 发布

丑小鸭变黑天鹅

最新推荐文章于 2025-06-22 16:10:58 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue日常总结文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41880073/article/details/114550199

Vue日常总结专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何在Vue框架中实现单选按钮、复选框和下拉框的默认选中效果。通过在data数据中操作v-model，可以轻松设置表单元素的初始状态。学习Vue能提高开发效率，但原生JS的基础同样重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue框架--表单元素默认被选中

我们都知道复选框在前端开发中的重要性，可以说，到处都在使用，最近在学习vue，看了vue的处理方式，感觉尤大大太牛了。这里总结一下表单默认被选中的操作

对于单选按钮radio，如果想默认选中“女”或者“男”，只需在data数据里操作input所绑定的v-model即可，代码如下

         new Vue({
            el: "#demo",
            data: {               
                sex: '男'       
            }

对于复选框checkbox，如果想默认选中某一个选型，只需在data数据里操作input所绑定的v-model即可，代码如下

<span>爱好:</span>
<input type="checkbox" id="basketball" value="basket" v-model="likes">
<label for="basketball">篮球</label>
<input type="checkbox" id="football" value="foot" v-model="likes">
<label for="football">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label><br>

		new Vue({
            el: "#demo",
            data: {             
                likes: ['foot'],                
            }

对于下拉框select，如果想默认选中某一选项，只需在data数据里直接操作select所绑定的v-model即可，代码如下

 		new Vue({
           el: "#demo",
            data: {               
                allCitys: [{
                    id: 1,
                    name: 'BJ'
                }, {
                    id: 2,
                    name: 'SH'
                }, {
                    id: 3,
                    name: 'GZ'
                }],
                cityId: '2'
            }

上一段完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
    1. 使用v-model(双向数据绑定)自动收集数据
    text/textarea
    checkbox
    radio
    select
    -->
    <div id="demo">
        <form action="/xxx" @submit.prevent="handSubmit">
            <span>用户名:</span>
            <input type="text" v-model="username"><br>

            <span>密码:</span>
            <input type="password" v-model="pwd"><br>

            <span>性别:</span>
            <input type="radio" id="female" value="女" v-model="sex">
            <label for="female">女</label>
            <input type="radio" id="male" value="男" v-model="sex">
            <label for="male">男</label><br>


            <span>爱好:</span>
            <input type="checkbox" id="basketball" value="basket" v-model="likes">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="football" value="foot" v-model="likes">
            <label for="football">足球</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
            <label for="pingpang">乒乓</label><br>

            <span>城市:</span>
            <select name="" id="" v-model="cityId">
                <option value="">未选择</option>
                <option :value="city.id" v-for="(city, index) in allCitys" :key="index">{{city.name}}</option>
            </select><br>

            <span>介绍</span>
            <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea><br>
            <input type="submit" value="注册">
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
                username: '',
                pwd: '',
                sex: '',
                likes: ['foot'],
                allCitys: [{
                    id: 1,
                    name: 'BJ'
                }, {
                    id: 2,
                    name: 'SH'
                }, {
                    id: 3,
                    name: 'GZ'
                }],
                cityId: '2',
                desc: ''
            },
            methods: {
                handSubmit() {
                    console.log(this.username, this.pwd);
                }
            },
        })
    </script>
</body>

</html>