Vue图片分类筛选项功能代码-vue案例-前端日记簿

首页 vue案例正文

Vue图片分类筛选项功能代码

2023-11-23 82

效果图：

在案例中我们通过点击按钮将对应的颜色进行筛选展示出来并且使用vue中transition-group 进行过渡动画设置

在根实例data中将需要的颜色以及其他数据准备好

 const app = new Vue({
    el: "#app",
    data() {
      return {
        items: [
          {
            id: 1,
            color: "red",
          },
          {
            id: 2,
            color: "red",
          },
          {
            id: 3,
            color: "red",
          },
          {
            id: 4,
            color: "blue",
          },
          {
            id: 5,
            color: "blue",
          },
          {
            id: 6,
            color: "blue",
          },
          {
            id: 7,
            color: "green",
          },
          {
            id: 8,
            color: "green",
          },
          {
            id: 9,
            color: "green",
          },
        ],
        filt: "all",
        title: "颜色分类",
      };
    },

在视图层中给四个按钮绑定点击事件当点击下对应的按钮时给filt进行赋值

在计算属性中 filtLtems方法中先声明一个变量然后在if判断中当filt不等于all时声明一个filt等会data中的filt

给data中的数组进行筛选数组中的color等于点击传入的filt 就返回到result中

如果filt不等于则result等于当前items 并返回result

最后在视图层当中对filtLtems进行遍历并将id写入以及给当前span动态绑定数组中的color作为类在css中设置对应的类即可

css：

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片分类筛选项功能vue代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #app {
        max-width: 700px;
        margin: 20px auto;
      }

      #app span {
        display: inline-block;
        text-align: center;
        padding: 70px;
        margin: 3px;
        background: #ccc;
      }
      button {
        cursor: pointer;
        display: inline-block;
        width: 80px;
        height: 40px;
        margin-right: 10px;
        outline: none;
        margin-bottom: 20px;
      }
      .red {
        background: #ef5350 !important;
      }

      .blue {
        background: #03a9f4 !important;
      }

      .green {
        background: #4caf50 !important;
      }

      .list-complete {
        transition: all 0.5s;
        display: inline-block;
        margin-right: 10px;
      }
      .list-complete-enter,
      .list-complete-leave-active {
        opacity: 0;
        transform: translateY(30px);
      }
      .list-complete-leave-active {
        position: absolute;
      }
      hr {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <hr />
      <button @click="filt = 'all'">全部</button>
      <button @click="filt = 'red'">红色</button>
      <button @click="filt = 'blue'">蓝色</button>
      <button @click="filt = 'green'">绿色</button>
      <transition-group name="list-complete" tag="p">
        <span
          v-for="item in filtItems"
          :key="item.id"
          class="list-complete"
          :class="item.color"
        >
          {{ item.id }}
        </span>
      </transition-group>
    </div>
  </body>
</html>
<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data() {
      return {
        items: [
          {
            id: 1,
            color: "red",
          },
          {
            id: 2,
            color: "red",
          },
          {
            id: 3,
            color: "red",
          },
          {
            id: 4,
            color: "blue",
          },
          {
            id: 5,
            color: "blue",
          },
          {
            id: 6,
            color: "blue",
          },
          {
            id: 7,
            color: "green",
          },
          {
            id: 8,
            color: "green",
          },
          {
            id: 9,
            color: "green",
          },
        ],
        filt: "all",
        title: "颜色分类",
      };
    },
    computed: {
      filtItems() {
        var result;
        if (this.filt != "all") {
          var filt = this.filt;
          result = this.items.filter(function (i) {
            return i.color == filt;
          });
        } else {
          result = this.items;
        }
        return result;
      },
    },
    methods: {},
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=226

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。