How To Use Custom Filter In Vue.js
Use Vue.js Custom Filter. Without Any npm Plugin And Jquery.
Step 1: Components
<template> <div class="filter-area pt-100 pb-75"> <div class="container"> <ul class="filter-menu"> <li class="filter" :class="{ active: itemFilterKey == 'all' }" v-on:click="itemFilterKey = 'all'" > All </li> <li class="filter" :class="{ active: itemFilterKey == 'mobile' }" v-on:click="itemFilterKey = 'mobile'" > Mobile App </li> <li class="filter" :class="{ active: itemFilterKey == 'development' }" v-on:click="itemFilterKey = 'development'" > Development </li> <li class="filter" :class="{ active: itemFilterKey == 'web' }" v-on:click="itemFilterKey = 'web'" > Web Design </li> <li class="filter" :class="{ active: itemFilterKey == 'product' }" v-on:click="itemFilterKey = 'product'" > Product Design </li> </ul> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6" v-for="item in itemFilter" :key="item.id" > <div class="single-filter-item" data-aos="fade-up" data-aos-delay="50" data-aos-duration="500" data-aos-once="true" > <div class="filter-image"> <img :src="item.image" alt="image" /> </div> <div class="filter-content"> <h3> {{ item.title }} </h3> </div> </div> </div> </div> </div> </div> </template>
Step 2: Script
<script> export default { data: function () { return { itemFilterKey: "all", items: [ { id: 1, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737384/projects-1_g9ppv0.jpg", title: "3D Animation", key: "mobile", }, { id: 2, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-2_m7u38j.jpg", title: "Online Banking Software", key: "development", }, { id: 3, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-3_tlvjs9.jpg", title: "Cashier Software", key: "product", }, { id: 4, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-4_jxtkvk.jpg", title: "Analytics Software", key: "development", }, { id: 5, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737382/projects-5_zao6wq.jpg", title: "Messaging App", key: "web", }, { id: 6, image: "https://res.cloudinary.com/do2wma1dv/image/upload/v1677737383/projects-6_nqjve2.jpg", title: "Banking Software", key: "mobile", }, ], }; }, computed: { itemFilter() { return this[this.itemFilterKey]; }, all() { return this.items; }, mobile() { return this.items.filter((item) => item.key == "mobile"); }, development() { return this.items.filter((item) => item.key == "development"); }, web() { return this.items.filter((item) => item.key == "web"); }, product() { return this.items.filter((item) => item.key == "product"); }, }, }; </script>
Step 3: SCSS
<style lang="scss" scoped> .filter-area { background: #14042c } .filter-menu { list-style-type: none; padding: 0; text-align: center; margin-bottom: 45px; li { display: inline-block; padding: 10px 25px; background-color: #fff; color: #14042c; box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1); border-radius: 15px; font-size: 16px; font-weight: 600; margin-right: 15px; transition: 0.6s; cursor: pointer; &:last-child { margin-right: 0; } &:hover { background: radial-gradient( circle, #a66bff, #c666ef, #dd62df, #ee61cf, #fb64bf ); color: #fff; } } .filter { &.active { background: radial-gradient( circle, #a66bff, #c666ef, #dd62df, #ee61cf, #fb64bf ); color: #fff; } } } .single-filter-item { margin-bottom: 25px; position: relative; &::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: 0.6s; visibility: hidden; background: radial-gradient( circle, #a66bff, #c666ef, #dd62df, #ee61cf, #fb64bf ); border-radius: 20px; z-index: 1; } .filter-image { overflow: hidden; border-radius: 20px; a { display: block; img { border-radius: 20px; transition: 0.6s; } } } .filter-content { position: absolute; left: 0; bottom: 0; opacity: 0; padding: 30px; padding-bottom: 0; visibility: hidden; transition: 0.6s; z-index: 9; h3 { font-size: 22px; font-weight: bold; margin-bottom: 15px; color: #fff; &:hover { color: #14042c; } } } &:hover { &::before { margin: 10px; opacity: 1; visibility: visible; } .filter-image { a { img { transform: scale(1.1); filter: blur(2px); } } } .filter-content { opacity: 1; visibility: visible; padding-bottom: 30px; } } } </style>