7 天前，我開始使用 Vue.js 我有一個簡單的應用程式，我在其中列出了作業，并有 4 個過濾器和一個handleClick函式來過濾位置、薪水、公司和職位。
現在我想了解如何在 Vue 中使用 Composition API 添加活動類？
我知道如何在 React 中完美地做到這一點，但想知道如何使用 Vue 來做到這一點。
代碼：
<template>
<div class="app">
<header>
<div class="order">
<button @click="orderByTerm('title')">Order by title</button>
<button @click="orderByTerm('salary')">Order by salary</button>
<button @click="orderByTerm('location')">Order by location</button>
<button @click="orderByTerm('company')">Order by company</button>
</div>
</header>
<JobList :jobs="jobs" :order="order" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import JobList from "./components/JobList.vue";
import Job from "./types/Job";
import OrderTerm from "./types/OrderTerm";
import AllJobs from "./data/jobs";
export default defineComponent({
name: "App",
components: { JobList },
setup() {
const jobs = ref<Job[]>(AllJobs);
const order = ref<OrderTerm>("title");
const orderByTerm = (term: OrderTerm) => {
order.value = term;
};
return { jobs, orderByTerm, order };
},
});
</script>
uj5u.com熱心網友回復：
您是否嘗試系結類：
<button @click="orderByTerm('company')" :class="order === 'company' ? 'active' : ''">
...
uj5u.com熱心網友回復：
如果需要更多選項，您還可以將類系結到變數或計算屬性。例如，您正在使用 BEM 或類似的 CSS 類命名方法，然后您的代碼可能是這樣的
<aside class="admin-menu__aside" :class="menu_expanded" ref="menu_aside">
data(){
return {
menu_expanded: null
}
}
methods: {
expand_menu(){
const media = window.matchMedia('(min-width: 1024px)');
if(!media.matches) return;
this.$refs.menu_aside.addEventListener('mouseenter', () => {
this.menu_expanded = 'admin-menu__aside-full';
})
this.$refs.menu_aside.addEventListener('mouseleave', () => {
this.menu_expanded = 'admin-menu__aside-small';
})
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457860.html