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

查看所有标签

猜你喜欢:

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

Effective Java: Second Edition

Effective Java: Second Edition

Joshua Bloch / Addison-Wesley / 2008-05-28 / USD 54.99

Written for the working Java developer, Joshua Bloch's Effective Java Programming Language Guide provides a truly useful set of over 50 best practices and tips for writing better Java code. With plent......一起来看看 《Effective Java: Second Edition》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具