Tag: Vue
-
How to use Custom Dynamic Calendar in Vue 3
Use Vue.js Dynamic Calendar. Without Any npm Plugin And jQuery. Step 1: Components <template> <div class=”calendar-area”> <div class=”container”> <div class=”calendar-wrapper”> <header> <h3>Calendar</h3> <p class=”current-date”>{{ currentDate }}</p> <div class=”icons”> <span id=”prev” @click=”changeMonth(-1)”> <i class=”ri-arrow-left-s-line”></i> </span> <span id=”next” @click=”changeMonth(1)”> <i class=”ri-arrow-right-s-line”></i> </span> </div> </header> <div class=”calendar”> <ul class=”weeks”> <li>Sun</li> <li>Mon</li> <li>Tue</li> <li>Wed</li> <li>Thu</li> <li>Fri</li> <li>Sat</li> </ul>…
-
How To Use The Load More Items Button For Vue.js
Use Vue.js Load More Items Button. Without Any npm Plugin And jQuery. Step 1: Components <template> <div class=”container”> <div class=”row justify-content-center text-center”> <div class=”col-lg-4 col-md-6″ v-for=”(item, index) in items” :key=”index” > <h1>{{ item.title }}</h1> </div> <div class=”col-lg-12″> <button @click=”loadMore” class=”default-btn”> Load More </button> </div> </div> </div> </template> Step 2: Script <script> export default { data()…
-
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:…
-
How to add dynamic current year in Vue JS
Use Vue.js dynamic current year. without any npm plugin and jquery. Step 1: Components <template> <div class=”copyright-area”> <p>CopyRight – {{currentYear}}</p> </div> </template> Step 2: JS <script> export default { data() { return { currentYear: new Date().getFullYear(), }; }, } </script>