Vue input checkbox 全选反选

本文介绍如何利用Vue.js和jQuery技术实现商品选择界面,包括全选/反选功能及动态样式变化。通过示例代码展示了如何在前端开发中结合这两种技术来提升用户体验。

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

首先在终端中安装jquery

npm i jquery --save
<div class="container mt-3">
            <p>
                <label><input type="checkbox" @click="ckb" />全选反选</label>
            </p>
            <div class="row">
                <div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)">
                    <div class="card-header"> {{ index+1 }}  <span><input type="checkbox" v-model="checked" /></span></div>
                    <div class="card-body text-info">
                        <h4 class="card-title">{{ shop.title }}</h4>
                        <p class="card-text">¥{{ shop.price }}</p>
                    </div>
                </div>
            </div>
        </div>
import $ from "jquery";
    export default{
        data(){
            return{
                checked:false,
                colorList:['primary','danger','secondary','info'],
                shoplist:[
                    {title:'noodles',price:20,id:1},
                    {title:'rice',price:58,id:2},
                    {title:'sausage',price:35.5,id:3},
                    {title:'meat',price:100,id:4}
                ]
            }
        },
        methods:{
            calculate(index){
                var nm = this.colorList[Math.floor(Math.random() * this.colorList.length)];
                return "card mb-3 col-lg-3 border-"+nm;
            },
            ckb(event){
                //全选反选
                this.checked = $(event.target).prop("checked");
            }
        }
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值