[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练习参考答案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Ext JS源码分析与开发实例宝典

彭仁夔 / 电子工业出版社 / 2010-1 / 78.00元

《Ext JS源码分析与开发实例宝典》从Ext JS实现的基本功能开始讲解，从两个方面对Ext JS进行整体上的概述，让读者从宏观上去把握ExtJS框架。接下来讲解Ext JS核心基础知识，包括事件机制、模板模型、数据模型以及对类、函数、字符串、日期、数组及定时任务这6个类进行扩展。然后讲解Ext JS基于元素的开发，包括动画特效和拖曳实现等。最后深入讲解组件的开发，对布局、模型及4大组件一一进行......一起来看看《Ext JS源码分析与开发实例宝典》这本书的介绍吧!

码农工具