vue项目 点击关键词筛选, 默认是全部,点击两次后取消
时间: 2024-05-15 18:12:38 浏览: 11
实现这个功能的一种方法是,在你的 Vue 组件中定义一个 data 属性来表示当前选中的关键词,初始值为 "全部"。然后,在模板中渲染一个关键词列表,并在每个关键词上绑定一个点击事件。点击事件触发时,将当前选中的关键词更新为点击的关键词。如果用户再次点击当前选中的关键词,就将当前选中的关键词重置为 "全部"。
下面是一个简单的示例代码:
```
<template>
<div>
<div v-for="keyword in keywords" :key="keyword" @click="selectKeyword(keyword)">
{{ keyword }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedKeyword: "全部",
keywords: ["关键词1", "关键词2", "关键词3"]
};
},
methods: {
selectKeyword(keyword) {
if (this.selectedKeyword === keyword) {
this.selectedKeyword = "全部";
} else {
this.selectedKeyword = keyword;
}
}
}
};
</script>
```
在这个示例中,我们定义了一个 data 属性 selectedKeyword 来表示当前选中的关键词,初始值为 "全部"。在模板中,我们使用 v-for 渲染了一个关键词列表,并在每个关键词上绑定了一个点击事件。点击事件触发时,我们调用 selectKeyword 方法来更新当前选中的关键词。如果用户再次点击当前选中的关键词,我们就将当前选中的关键词重置为 "全部"。