用vue仿淘宝商品筛选

最新推荐文章于 2023-02-14 15:04:01 发布

啥时候能干全栈

最新推荐文章于 2023-02-14 15:04:01 发布

阅读量2.6k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42177478/article/details/105168230

版权

本文介绍了一个使用Vue.js实现的商品类型筛选功能，通过点击不同的商品类型，如牛仔裤、针织衫等，来筛选商品，并能取消选择。代码示例展示了如何在Vue中使用v-for循环遍历商品列表，以及通过@click事件处理用户的选择。

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

在这里插入图片描述
css略，点击牛仔裤添加到已选条件，点击x取消选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <div id="app">
        <div
            class="goods"
            v-for = "(goods,goodsIndex) in goodsList"
            :key = "goods.id"
        >
        <div class="title">{
   {
    goods.title }}:</div>
        <u