Vue.js如何实现点击按钮切换隐藏/显示未完成任务功能

实现思路 #

• 新增展示模式标记：在data中添加showOnlyCompleted布尔变量，默认值为false，代表默认展示全部任务
• 新增计算属性做动态过滤：通过Vue计算属性根据当前展示模式返回对应的任务列表，不会修改原始的tasks数据
• 调整模板渲染逻辑：把列表渲染的源数据从原始tasks替换为过滤后的计算属性，实现自动响应状态变化
• 简化点击事件逻辑：点击按钮仅需切换showOnlyCompleted的布尔值即可，还可同步修改按钮文案提升交互体验

修改后完整可运行代码 #

<div id="root">
    <h1>
        All Tasks
    </h1>
    <ul>
        <li v-for="task in filteredTasks" v-text="task.description"></li>
    </ul>
    <button @click="hideIncompleteTasks" v-text="showOnlyCompleted ? '显示全部任务' : '仅显示已完成'"></button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({
        el: "#root",
        data: {
            showOnlyCompleted: false,
            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 },
            ]
        },
        computed: {
            filteredTasks() {
                // 如果开启仅显示已完成，就过滤返回completed为true的任务，否则返回全部
                return this.showOnlyCompleted ? this.tasks.filter(task => task.completed) : this.tasks
            }
        },
        methods: {
            hideIncompleteTasks() {
                // 切换展示模式即可，计算属性会自动重新计算
                this.showOnlyCompleted = !this.showOnlyCompleted
            }
        },
    })
</script>

内容的提问来源于stack exchange，提问作者Chukwudumebi Orji