Vue input checkbox 全选反选

最新推荐文章于 2025-04-15 17:55:57 发布

AspNetSunny

最新推荐文章于 2025-04-15 17:55:57 发布

阅读量860

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： checkbox vue全选反选

本文链接：https://blog.youkuaiyun.com/sunnywuxian/article/details/82387251

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用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");
            }
        }
    }