我如何让按钮隐藏未完成的任务
How would I make the button hide the incomplete tasks
这是 Jsfiddle:https://jsfiddle.net/zxo35mts/1/
本质上,我试图让按钮在单击时隐藏所有未完成的任务,并在再次单击时再次显示它们,但我不知道该怎么做
<div id="root">
<h1>
All Tasks
</h1>
<ul>
<li v-for="task in tasks" v-text="task.description"></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
]
},
methods: {
hideIncompleteTasks() {
if (!this.tasks.completed) {
}
}
},
})
</script>
添加另一个名为 showCompleted
的 属性,它可以通过按钮单击事件更新,然后根据第一个 [=19] 添加另一个名为 shownTasks
的计算 属性 =]:
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
],
showCompleted:false
},
computed:{
shownTasks(){ return this.showCompleted?this.tasks.filter(task=>task.completed):this.tasks;}
},
methods: {
hideIncompleteTasks() {
this.showCompleted=!this.showCompleted
}
},
})
然后将 shownTasks
渲染为:
<ul>
<li v-for="task in shownTasks" v-text="task.description"></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
一种方式:
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
],
onlyCompleted: false
},
methods: {
hideIncompleteTasks() {
this.onlyCompleted = !this.onlyCompleted
}
},
})
.hiden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
<h1>
All Tasks
</h1>
<ul>
<li v-for="task in tasks" v-text="task.description" :class="onlyCompleted && !task.completed && 'hiden' "></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
</div>
这是 Jsfiddle:https://jsfiddle.net/zxo35mts/1/
本质上,我试图让按钮在单击时隐藏所有未完成的任务,并在再次单击时再次显示它们,但我不知道该怎么做
<div id="root">
<h1>
All Tasks
</h1>
<ul>
<li v-for="task in tasks" v-text="task.description"></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
]
},
methods: {
hideIncompleteTasks() {
if (!this.tasks.completed) {
}
}
},
})
</script>
添加另一个名为 showCompleted
的 属性,它可以通过按钮单击事件更新,然后根据第一个 [=19] 添加另一个名为 shownTasks
的计算 属性 =]:
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
],
showCompleted:false
},
computed:{
shownTasks(){ return this.showCompleted?this.tasks.filter(task=>task.completed):this.tasks;}
},
methods: {
hideIncompleteTasks() {
this.showCompleted=!this.showCompleted
}
},
})
然后将 shownTasks
渲染为:
<ul>
<li v-for="task in shownTasks" v-text="task.description"></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
一种方式:
new Vue({
el: "#root",
data: {
tasks: [
{ description: "go to the store", completed: true },
{ description: "finish screencast", completed: false },
{ description: "make donation", completed: false },
{ description: "clear inbox", completed: false },
{ description: "make dinner ", completed: false },
{ description: "clean room", completed: true },
],
onlyCompleted: false
},
methods: {
hideIncompleteTasks() {
this.onlyCompleted = !this.onlyCompleted
}
},
})
.hiden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
<h1>
All Tasks
</h1>
<ul>
<li v-for="task in tasks" v-text="task.description" :class="onlyCompleted && !task.completed && 'hiden' "></li>
</ul>
<button @click="hideIncompleteTasks">show only completed</button>
</div>