[Vue 2.x Todo 教程练习参考答案] 添加todo练习参考答案

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

内容简介：为了防止创建空的 todo，在 addTodo 方法中判断用户的输入，若为空则直接返回，什么都不做：首先我们需要检查用户输入的内容是否为空，如果为空我们为 todo 添加框设置一个 empty 的样式，该样式规则为边框为红色，并且根据是否为空这个条件来决定是否显示“请输入内容”的提示。判断为空的条件就是 this.newTodoTitle 为空字符串，或等价的其长度为 0，为此我们添加一个计算属性：然后我们在模板中引用这个属性来判断是否应用 empty 样式和是否显示提示信息：

练习一

为了防止创建空的 todo，在 addTodo 方法中判断用户的输入，若为空则直接返回，什么都不做：

addTodo: function () {
    if (this.newTodoTitle === '') {
        return
    }

    this.todos.push({id: id++, title: this.newTodoTitle});
    this.newTodoTitle = ''
}

练习二

首先我们需要检查用户输入的内容是否为空，如果为空我们为 todo 添加框设置一个 empty 的样式，该样式规则为边框为红色，并且根据是否为空这个条件来决定是否显示“请输入内容”的提示。判断为空的条件就是 this.newTodoTitle 为空字符串，或等价的其长度为 0，为此我们添加一个计算属性：

<head>
  <style>
    ...
    .empty {
      border-color: red;
    }
  </style>
</head>

var app = new Vue({
    ...
    computed: {
        emptyChecked: function () {
            return this.newTodoTitle.length === 0
        }
    }
})

然后我们在模板中引用这个属性来判断是否应用 empty 样式和是否显示提示信息：

<input type="text"
       v-bind:class='{empty: emptyChecked}'
       placeholder="添加 todo"
       v-model="newTodoTitle"
       @keyup.enter="addTodo"/>
<span v-if="emptyChecked" style="color: red">请输入内容！</span>

注意新增的 v-bind:class='{empty: emptyChecked}' ，只要 emptyChecked 的值为 true，则应用 empty 样式，且 v-if 条件满足，提示信息显示。

但是上述方案存在一点点小瑕疵。更好的用户体验应该是当用户敲击回车添加todo时，如果我们检测到空值，就提示用户，显示红色边框和提示信息，但是上面的方案我们无法区分用户是否按下了回车，上述方案在任何时候，只要todo值为空（即使是页面刚刚加载，用户没有输入任何内容时），也会显示提示信息。

为了完善，我们添加一个标志字段 checkEmpty，初始化时为 false，表明无需检查空值，当用户按下回车添加 todo 是，checkEmpty 变为 true，表明需要检查空值，完善后的代码如下:

var app = new Vue({
    el: '#todo-app',
    data: function () {
        return {
            todos: [],
            newTodoTitle: '',
            checkEmpty: false // 增加一个检查空值标志
        }
    },
    methods: {
        addTodo: function () {
            if (this.newTodoTitle === '') {
                this.checkEmpty = true;
                return
            }

            this.todos.push({id: id++, title: this.newTodoTitle});
            this.newTodoTitle = '';
            this.checkEmpty = false;
        }
    },
    computed: {
        emptyChecked: function () {
            return this.newTodoTitle.length === 0 && this.checkEmpty
        }
    }
})

这里 emptyChecked 的逻辑没有太大变化，只是其值会根据 newTodoTitle 和 checkEmpty 来改变，如果无需 checkEmpty ，则其总是假。checkEmpty 只有在用户按下回车时为 true，其它时候都是假。

-- EOF --

以上所述就是小编给大家介绍的《[Vue 2.x Todo 教程练习参考答案] 添加todo练习参考答案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

深入理解 Flask

[美]Jack Stouffer / 苏丹 / 电子工业出版社 / 2016-7-1 / 79.00

Flask 是一种具有平缓学习曲线和庞大社区支持的微框架，利用它可以构建大规模的web应用。学习上手Flask非常轻松，但要深入理解却并不容易。本书从一个简单的Flask应用开始，通过解决若干实战中的问题，对一系列进阶的话题进行了探讨。书中使用MVC（模型-视图-控制器）架构对示例应用进行了转化重构，以演示如何正确地组织应用代码结构。有了可扩展性强的应用结构之后，接下来的章节使用Flask......一起来看看《深入理解 Flask》这本书的介绍吧!

码农工具

[Vue 2.x Todo 教程练习参考答案] 添加todo练习参考答案

练习一

练习二

深入理解 Flask

Markdown 在线编辑器

RGB HSV 转换

HSV CMYK 转换工具