添加todo练习参考答案

2019-01-104033 阅读2 评论

练习一

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

2 评论
登录后回复
慰风尘丶
2019-10-28 21:56:19

请教一下:页面点击刷新 "请输入内容!" 会闪烁一下是什么原因呢

回复
1024th 慰风尘丶
2020-03-21 18:57:16

这是因为 vue 的加载晚于 <div id="todo-app>...</div> 的加载,把 vue 的引入放到 <div id="todo-app>...</div> 之前就可以了。

回复