练习一
为了防止创建空的 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 --