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

单选框和复选框
  1. 按照v-model进行分组,单选框的数据是一个值,复选框是一个数组
  2. 每一个框都有自己的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事件函数。
下拉框
  1. slelct:绑定数据,表示选中项的值。

  2. 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>
Vue,可以使用v-for指令绑定多组复选框单选框。下面分别介绍如何绑定多组复选框单选框。 1. 绑定多组复选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], checkedItems: [] } } } </script> ``` 上述代码使用v-for指令遍历items数组,生成多组复选框使用v-model指令将复选框的选状态与checkedItems数组绑定,checkedItems数组会根据选复选框动态更新。 2. 绑定多组单选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="radio" :id="item.id" :value="item.value" v-model="selectedItem"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], selectedItem: '' } } } </script> ``` 上述代码使用v-for指令遍历items数组,生成多组单选框使用v-model指令将单选框的选状态与selectedItem变量绑定,selectedItem变量会根据选单选框动态更新。请注意,单选框的name属性应该相同,这样才能实现单选的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值