[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练习参考答案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- [Vue 2.x Todo 教程练习参考答案] 标为完成练习参考答案
- [Vue 2.x Todo 教程练习参考答案] 入门仪式_Hello_Vue练习参考答案
- 一些问题的答案
- Runtime经典面试题(附答案)
- Java面试要点-数据存储-精简答案
- 120分的转录组试题和答案
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
