[Vue 2.x Todo 教程练习参考答案] 添加todo练习参考答案
栏目: JavaScript · 发布时间: 5年前
内容简介:为了防止创建空的 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分的转录组试题和答案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。