添加todo练习参考答案

练习一

为了防止创建空的 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 教程练习参考答案

练习一

练习二

目录