【Vue】通过Vue操作表单元素(下拉框、选择框)等示例(图文+完整代码)

这个示例展示了如何使用Vue.js创建交互式的表单元素,包括静态和动态的单选按钮(radio)、复选框(checkbox)以及自定义样式的下拉选择框(select)。代码中包含了数据绑定、事件监听和样式调整,适用于前端开发中的表单设计和用户输入处理。
摘要由CSDN通过智能技术生成

  

代码: 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<style>
    /* select {
        width: 200px;
        height: 30px;
        font-size: 16px;
    } */

    select {
        /* styling */
        background-color: white;
        border: thin solid rgb(199, 199, 199);
        border-radius: 4px;
        display: inline-block;
        font: inherit;
        line-height: 1.5em;
        padding: 0.5em 3.5em 0.5em 1em;

        /* reset */

        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    select.minimal {
        background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            linear-gradient(to right, #ccc, #ccc);
        background-position:
            calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            calc(100% - 2.5em) 0.5em;
        background-size:
            5px 5px,
            5px 5px,
            1px 1.5em;
        background-repeat: no-repeat;
    }

</style>
<script type="text/javascript" src="vue.js"></script>

<body>
    <div id="box">

        <div>
            【静态radio】 ==== 判断题 ====
            <p>
                1、感冒需要喝药(判断题):
            <p>
                <input type="radio" v-model="radioValue" value="1">正确
                <input type="radio" v-model="radioValue" value="2">错误
            <p>
                【动态radio】 ==== 单选题 ====
            <p>
                1、中国的首都城市是:
            <p>

            <div v-for="p in listRadio">
                <!-- 注意:只有一组name都是同一个值,才是单选 -->
                <!-- 注意:当v-model=value,就会被选中 -->
                <input type="radio" :value="p.ID" v-model="p.IsValue" :name="groupId" @click="mClick(p.ID)">
                <label>{{p.Title}}</label>
            </div>
        </div>
        <div>
            <p>
                -----------------------------------------------------
            <p>
                【静态1:checkbox】 ==== 多选题 ====
            <p>
                <!-- 注意:v-model中的checked为数组,value的值是谁为选中 -->
                于大爷爱好:
                <input type="checkbox" v-model="checked" value="1">抽烟
                <input type="checkbox" v-model="checked" value="2">喝酒
                <input type="checkbox" v-model="checked" value="3">烫头
                <input type="checkbox" v-model="checked" value="4">遛狗
                <br><br>
            <p>
                【静态2:checkbox】 ==== 多选题 ====
            <p>
                <!-- 注意:v-model中的checkTrue为选中,checkFalse为不选中 -->
                于大爷爱好:
                <input type="checkbox" v-model="checkTrue" value="1">抽烟
                <input type="checkbox" v-model="checkFalse" value="2">喝酒
                <input type="checkbox" v-model="checkFalse" value="3">烫头
                <input type="checkbox" v-model="checkTrue" value="4">遛狗
                <br><br>
                【动态checkbox】 ==== 多选题 ====
            <p>
            <div class="answer" v-for="s in listCheck" :key="s.ID">
                <input type="checkbox" :value="s.ID" v-model="s.IsCorrect==1" @click="mClick(s.ID,s.IsCorrect)">
                <label>{{s.Title}}</label>
            </div>

            <p>
                -----------------------------------------------------
            <p>
                【动态select】 ==== 下拉框 ====
            <div>
                <select  class="minimal" v-model="classSelected" @change="change">
                    <option :value="a.id" v-for="a in classList">
                        {{a.name}}
                    </option>
                </select>
            </div>

        </div>

    </div>
</body>
<script type="text/javascript">
    var box = new Vue({
        el: "#box",
        data: {

            radioValue: "2", // 值=Value名称为选中状态
            groupId: "888", // 组号
            listRadio: [{
                "ID": 10190,
                "Title": "北京",
                "IsValue": ""
            },
            {
                "ID": 10191,
                "Title": "上海",
                "IsValue": "10191"
            },
            {
                "ID": 10192,
                "Title": "广州",
                "IsValue": ""
            }
            ],
            checked: ['1', '3'],
            checkTrue: 1,  // 选中
            checkFalse: 0,  // 不选中
            listCheck: [{
                "ID": 10190,
                "Title": "北京",
                "IsValue": "",
                "IsCorrect": "1"
            },
            {
                "ID": 10191,
                "Title": "上海",
                "IsValue": "10191",
                "IsCorrect": "0"
            },
            {
                "ID": 10192,
                "Title": "广州",
                "IsValue": "",
                "IsCorrect": "1"
            }
            ],
            classList: [{
                id: "0",
                name: "全部分类"
            },
            {
                id: "1",
                name: "类别A"
            },
            {
                id: "2",
                name: "类别B"
            },
            {
                id: "3",
                name: "类别C"
            },
            ],
            // 后台更新classList,默认选中:0-全部分类
            classSelected: 0

        },
        methods: {
            mClick(s, b) {
                alert("Id=" + s + "  组ID:this.groupId");
                alert("点击前的状态" + b);
            },
            change() {
                alert(this.classSelected);
            }
        }
    })
</script>

</html>

二、checkbox下拉框的简单勾选实例

 1、html

 <span class="checkbox_span">
       <input type="checkbox" class="Checkbox" id="check3">
       <label for="check3" class="checkbox_label"></label>
 </span>

2、css

<link rel="stylesheet" href="css/CheckBox.css">
 
    /* 圆圈样式 */
    .Checkbox+.checkbox_label {
        width: 23px;
        height: 23px;
    }
 
    /* 对勾样式 */
    .Checkbox:checked+.checkbox_label:after {
        left: -1px;
        top: -1px;
        width: 25px;
        height: 25px;
        font-weight:900;
        font-size: 16px;
        line-height: 25px;
    }

三、checked复选框打对勾的最合理用法(循环用法)

主要用到的是::checked="true" 选中打对勾,:checked=“flase”取消对勾

但是表现出一个表达式,最适用:

如::checked="selected==1",打对勾

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框实例</title>
    <script src="js/vue/vue.js"></script>
</head>

<link rel="stylesheet" href="css/CheckBox.css">
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <div id="app">
        <span v-for="todoObj in todos" class="checkbox_span">
            <input type="checkbox" :checked="todoObj.selected==1" :id="todoObj.id" />{{todoObj.title}} <br>
        </span>
    </div>
</body>

<!-- 选中效果 -->
<script>

    var app = new Vue({

        el: "#app",
        data: {
            todos: [
                { id: "001", title: "抽烟", selected: "1" },
                { id: "002", title: "喝酒", selected: "0" },
                { id: "003", title: "烫头", selected: "1" },
            ],
        },
    })
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值