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

查看所有标签

猜你喜欢:

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

爆品手记

爆品手记

金错刀 / 中国友谊出版公司 / 2016-9-20 / 39.80

互联网时代,一切都被颠覆。 B2B、B2C、O2O等商业模式的建立,对传统企业构成了巨大冲击。人们的生意往来逐渐从线下转移到了线上,传统的定位理论逐渐失效,依靠爆品引爆市场才是王道;传统企业经营多年的渠道营销模式正遭遇前所未有的阻力,网上商城正成为众多商家角逐血拼的主要战场。 在互联网的黑暗森林里,一切传统的商业模式统统失效,一场依靠爆品点燃市场、引爆市场、占据市场的营销革命正悄然兴起......一起来看看 《爆品手记》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

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

HEX HSV 互换工具