vue-常用表单操作

最新推荐文章于 2023-04-23 16:58:33 发布

是阿欢啊

最新推荐文章于 2023-04-23 16:58:33 发布

阅读量275

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_49571987/article/details/109367847

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

###表单元素
1、单选框

<body>
    <div id="box">
        <!-- radio:需要出现单选情况，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 -->
        性别：
        <div>
            <input type="radio" v-model="sex" value="男"> 男
            <input type="radio" v-model="sex" value="女">女
        </div>
    </div>
</body>
<!-- 引入线上vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        let vm=new Vue({
            el:"box",
            data:{
                sex:"男"
            }
        })
</script>

2、多选框

<body>
    <div id="box">
        爱好：
        <div>
            <input type="checkbox" value="唱歌" v-model='user.hobby'>唱歌
            <input type="checkbox" value="跳舞" v-model='user.hobby'>跳舞
            <input type="checkbox" value="旅游" v-model='user.hobby'>旅游
            <input type="checkbox" value="写代码" v-model='user.hobby'>写代码
        </div>
    </div>
</body>
<!-- 引入线上vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        let vm=new Vue({
            el:"box",
            data:{
                user:{
                    hobby:["旅游","写代码"]
                }
            }
        })
</script>

3、下拉框

<body>
    <div id="box">
        <div>
            专业:
            <select name="" id="" v-model='user.job'>
                <option value="web工程师" >web工程师</option>
                <option value="java工程师">java工程师</option>
                <option value="php工程师">php工程师</option>
                <option value="UI工程师">UI工程师</option>
            </select>
        </div>
    </div>
</body>
<!-- 引入线上vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        let vm=new Vue({
            el:"box",
            data:{
                user:{
                    job:"web工程师"     //下拉框默认选择web工程师
                }
            }
        })
</script>

4、下拉框多选

<body>
    <div id="box">
        <div>
            <!-- 给select添加mutiple属性 可以让下拉框实现多选状态（注意需要加上shift键） -->
            <select v-model='user.book' multiple>
                <option value="英语三级">英语三级</option>
                <option value="英语四级">英语四级</option>
                <option value="英语六级">英语六级</option>
            </select>
        </div>
    </div>
</body>
<!-- 引入线上vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        let vm=new Vue({
            el:"box",
            data:{
                user:{
                    book:[]
                }
            }
        })
</script>

彩蛋：解决使用插值表达式会出现闪烁的问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决插值表达式闪烁问题 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="box" v-cloak>
        {{msg}}
    </div>
</body>
<!-- 引入线上vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        let vm=new Vue({
            el:"box",
            data:{
              msg:"hello web"
            }
        })
</script>