[Vue 2.x Todo 教程练习参考答案] 标为完成练习参考答案

栏目: JavaScript · 发布时间: 7年前

内容简介:只需要根据 todo.completed 的状态来条件渲染标为完成的按钮即可,v-if 指令正好派上用场:上述 v-if 语句将已完成的 todo 后的标为完成的按钮隐藏,对应的 else 语句就应该是显示一个标为未完成的按钮,这个按钮和 markAsCompleted 类似,它监听 click 事件并调用 markAsUncompleted 函数,将 todo 的 completed 状态置回 false,从而将已完成的 todo 重新标记为未完成:-- EOF --

练习一

只需要根据 todo.completed 的状态来条件渲染标为完成的按钮即可,v-if 指令正好派上用场:

<input v-if="!todo.completed" type="button"
       value="标为完成"
       @click="markAsCompleted(todo)"/>

练习二

上述 v-if 语句将已完成的 todo 后的标为完成的按钮隐藏,对应的 else 语句就应该是显示一个标为未完成的按钮,这个按钮和 markAsCompleted 类似,它监听 click 事件并调用 markAsUncompleted 函数,将 todo 的 completed 状态置回 false,从而将已完成的 todo 重新标记为未完成:

<input v-if="!todo.completed" type="button"
       value="标为完成"
       @click="markAsCompleted(todo)"/>
<input v-else type="button"
       value="标为未完成"
       @click="markAsUncompleted(todo)"/>
methods: {
    addTodo: function () {
        this.todos.push(
            // 修改后的 todo 模型
            {id: id++, title: this.newTodoTitle, completed: false}
        );
        this.newTodoTitle = '';
    },
    markAsCompleted: function (todo) {
        todo.completed = true
    },
    markAsUncompleted: function (todo) {
        todo.completed = false
    }
}

-- EOF --


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ethnography and Virtual Worlds

Ethnography and Virtual Worlds

Tom Boellstorff、Bonnie Nardi、Celia Pearce、T. L. Taylor / Princeton University Press / 2012-9-16 / GBP 21.00

"Ethnography and Virtual Worlds" is the only book of its kind - a concise, comprehensive, and practical guide for students, teachers, designers, and scholars interested in using ethnographic methods t......一起来看看 《Ethnography and Virtual Worlds》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具