Vue中的单选框、复选框和选择框的使用；click和change的区别

最新推荐文章于 2024-07-01 08:00:00 发布

Seven_5477

最新推荐文章于 2024-07-01 08:00:00 发布

阅读量7.2k

点赞数 2

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

本文链接：https://blog.csdn.net/m0_37922443/article/details/116064496

版权

Vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

单选框和复选框

按照v-model进行分组，单选框的数据是一个值，复选框是一个数组。
每一个框都有自己的value值，被选中的元素的value值就是对应的v-model绑定的值。

<!-- 单选框 -->
<input type="radio" value="0" v-model="sex">男
<input type="radio" value="1" v-model="sex">女
<button @click="submit">提交</button>

<!-- 复选框 -->
<body>
    <div id="app">
        <input type="checkbox" value="OK" v-model="all" @click="checkAll">全选/非全选
        <br>
        <div @change="delegate">
            <input type="checkbox" value="sing" v-model="hobby">唱歌
            <input type="checkbox" value="dance" v-model="hobby">跳舞
            <input type="checkbox" value="read" v-model="hobby">读书
            <input type="checkbox" value="draw" v-model="hobby">画画
        </div>
        <br>
        <button @click="submit">提交</button>
    </div>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#app",
            data: {
                hobby: ['sing'], //默认选中的某一项
                all: []
            },
            methods: {
                submit() {
                    console.log(this.hobby); //按照点击的顺序添加到数组
                },
                checkAll() {
                    // click事件处理=>下面的判断要取反
                    if (!this.all.includes('OK')) {
                        this.hobby = ["sing", "dance", "read", "draw"];
                    }
                    else {
                        this.hobby = [];
                    }
                },
                delegate() {
                    this.all = this.hobby.length >= 4 ? ['OK'] : [];
                }
            }
        });
    </script>
</body>

click和change事件的区别：

click事件的触发是在点击的那一刻，而change事件是在状态改变之后触发。
click：点击之后，视图绑定的数据还没有更新到data里，就已经执行事件函数了，导致data里的数据不是最新的。
change：视图绑定的数据发生了改变，才会去执行change事件函数。

下拉框

slelct：绑定数据，表示选中项的值。
option：选项的内容，通常使用v-for来遍历选项，并给每个选项设置value属性值。

<body>
    <div id="app">
        <select v-model="selected">
            <option v-for="(item, index) in options" :value="index">
                {{ item.name }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#app",
            data: {
                selected: '',
                options: [
                    { name: 'A'},
                    { name: 'B'},
                    { name: 'C'}
                ],
            }
        });
    </script>
</body>