Vue实例：类目筛选功能

最新推荐文章于 2024-06-01 11:16:50 发布

你我_山巅自相逢

最新推荐文章于 2024-06-01 11:16:50 发布

阅读量1.4k

点赞数

分类专栏：知识点文章标签： vue js

本文链接：https://blog.csdn.net/weixin_50981935/article/details/118516702

版权

知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

类目筛选功能：

每行只能选中一个
动态绑定选中元素的样式
点击“x”能去掉显示效果

一、css样式准备

    <style>
      body {
        background: #b5abb3;
      }
      dl,
      dd,
      h3,
      p {
        margin: 0;
      }
      h3 {
        display: inline-block;
      }
      p {
        display: inline-block;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul,
      ul li {
        display: inline-block;
        padding: 5px;
        border: 1px solid red;
      }
      ul li span {
        background-color: pink;
      }
      #app {
        width: 850px;
        background: rgba(255, 255, 255, 0.8);
      }
      dl {
        display: block;
      }
      dd {
        display: inline-block;
        padding: 5px;
      }
      span {
        color: red;
      }
      .active {
        background-color: red;
      }
    </style>

二、结构框架

  <body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
     
    </div>
    
    <script>
      //  创建vue实例
      var app = new Vue({
        el: "#app",
        data: { },
        methods: {  },
      });
    </script>
  </body>

三、分析代码

3.1准备数据

这是模拟的数据

      //  创建vue实例
      var app = new Vue({
        el: "#app",
        data: {
          selectGoods: {
            // 选中的数据它是一个对象，目的是为了去重，每行数据只能选出来一个
            // 0: "惠普",
            // 1: "1000",
            // 2: "12.0",
          },
          goodsList: [
            {
              title: "品牌",
              list: [
                "惠普",
                "联想",
                "方正",
                "戴尔",
                "三星",
                "宏基",
                "苹果",
                "华硕",
                "神州",
              ],
              id: 1,
            },

            {
              title: "价格",
              list: [
                "1000元",
                "2000元",
                "3000元",
                "4000元",
                "5000元",
                "6000元",
                "7000元",
                "8800元",
                "9000以上",
              ],
              id: 2,
            },
            {
              title: "尺寸",
              list: [
                "10.0英寸",
                "12.0英寸",
                "13.0英寸",
                "14.0英寸",
                "15.0英寸",
                "16.0英寸",
              ],
              id: 3,
            },
            {
              title: "显卡",
              list: ["独显", "集显", "核心显卡"],
              id: 4,
            },
          ],
        },
        });

填充数据

    <div id="app">
      <dl v-for="(good,goodIndex) in goodsList">
        <dt>{{good.title}}</dt>
        <dd v-for="(list,listIndex) in good.list">{{list}}</dd>
      </dl>
    </div>

dl是创建一个普通的列表，dt类似于表头，在上面。 dd是表格数据，在下面。
v-for在goodsList数组里面拿出来每行的title和每行的数据。
结果如下：在这里插入图片描述

3.2填充事件

设计思路是：通过点击不同的数据，加入到selectGoods这个对象里面，而显示区显示出来的就是selectGoods里面的所有对象的value

 <div class="select">
        <h3>已选条件：</h3>
        <p>没有选择的条件</p>
        <ul>
          <li v-for="(value,key) in selectGoods">{{value}} <span>x</span></li>
        </ul>
      </div>
    </div>

先模拟一下加进selectGoods对象里面的值，看看效果

 selectGoods: {
            // 选中的数据它是一个对象，目的是为了去重，每行数据只能选出来一个
            0: "惠普",
            1: "1000",
            2: "12.0英寸",
          },

效果如下:
在这里插入图片描述

接下来要做的就是：通过点击数据（dd里）来加入selectGoods对象。

1、添加点击事件

    <dd v-for="(list,listIndex) in good.list" @click="select">{{list}}</dd>

2、事件触发：加入对象（剩余传给的参数后面介绍）

      methods:{
      select: function (list, listIndex, good, goodIndex) {
            this.$set(this.selectGoods, goodIndex, list);
          },
       }

向数组里加入元素有push、unshift、splice等等
向对象加入元素方法是this.$set(x,y,z)x、y、z三个参数分别是插入哪个对象、插入的位置、插入的内容
功能完成

接下来就是点击叉号去掉所选的标签
在span标签里面添加点击触发del（key）事件，传递的key是在selectGoods对象里的元素的key值

<div class="select">
        <h3>已选条件：</h3>
        <p>没有选择的条件</p>
        <ul>
          <li v-for="(value,key) in selectGoods">
            {{value}} <span @click="del(key)"> x </span>
          </li>
        </ul>
      </div>

删除对象里的元素的方法是： this.$delete（x，y）里面有两个参数 x:代表从哪个对象里面删元素 y:代表删除元素的key值

  del: function (key) {
            this.$delete(this.selectGoods, key);
            this.goodsList[key].cn = " ";
          },

最后一部分功能就是动态绑定选中元素的样式
通过对象的形式绑定class类需要注意：
1.格式 :class="{active:bool值}"
2. 对象的key是active，也就是绑定的类名，后面的value是bool值，表示是否绑定

在dd上动态绑定active类（ class样式）
重点就是怎么设置这个bool值：good.cm===listIndex

 <dl v-for="(good,goodIndex,) in goodsList">
        <dt>{{good.title}}</dt>
        <dd
          v-for="(list,listIndex) in good.list"
          @click="select(list,listIndex,good,goodIndex)"
          :class="{active:good.cm===listIndex}"
        >
          {{list}}
        </dd>
      </dl>

在选择元素的时候注意触发事件的参数改一下：让模拟数组中的对象的索引等于正在点击元素的.cm 这样才绑定样式

         select: function (list, listIndex, good, goodIndex) {
            good.cm = listIndex;
            this.$set(this.selectGoods, goodIndex, list);
          },

删除的时候把模拟数据中选中元素的cm随便换一下就行,我是把cm换成了空
//点击叉号删除样式和每行选中的东西
del: function (key) {
this.$delete(this.selectGoods, key);
this.goodsList[key].cm = " ";
},

你我_山巅自相逢

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Vue实例：类目筛选功能

前言类目筛选功能：每行只能选中一个选中的标签绑定不同的类，有不同的显示效果点击“x”能去掉显示效果一、css样式准备 <style> body { background: #b5abb3; } dl, dd, h3, p { margin: 0; } h3 { display: inline-block; }
复制链接

扫一扫

专栏目录