🦋

Vue 2.x Todo 教程练习参考答案

入门仪式_Hello_Vue练习参考答案

2019-01-105873 阅读8 评论

练习一

需在 send 方法中做判断，当用户点击发送按钮，检测到 input 中没有输入任何值时，直接弹框提示并返回，只有有值才执行后续逻辑，示例代码如下：

methods: {
    send: function () {
        if (!this.count) {
            alert('请输入内容！');
            return
        }
        alert('发送成功！');
        this.value = ''
    }
},

练习二

参考官方文档我们可以看到 v-if 指令用于条件渲染元素，仅当 v-if 后面的表达式为真时，元素才被渲染，因此参考代码如下：

<div v-if="count">value 的值是：{{ value }}</div>

注意这里 count 是我们定义的计算属性，其值为 value 的长度，正好作为 v-if 的逻辑表达式，仅当 value 有值时，count 才非零（视为真），否则 count 为零（视为假，div 不被渲染）。

-- EOF --

  添加todo练习参考答案
8 评论
登录后回复
wheatPassersby
2021-08-10 00:40:10

新手，没想到这样写也可以。。。

再加下面的函数。
methods: {
send: function () {
alert('发送成功！');
this.value = ''
},

新加。

            send1: function () {
                alert('请输入数据！');
                this.value = ''
            }
        },

真的是各种实现都可以哦

回复
wheatPassersby wheatPassersby
2021-08-10 00:45:14

哇，这评论写的。。格式，都不知所云了。。。

新手，没想到这样写也可以。。。
新加

再加下面的函数。
methods: {
send: function () {
alert('发送成功！');
this.value = ''
},
新加。
send1: function () {
alert('请输入数据！');
this.value = ''
}
},

再测试一下，是否格式很乱。。。

回复
wheatPassersby wheatPassersby
2021-08-10 00:50:28

上边的按钮，再试一下代码是否不被解释成按钮，显示成代码
() <input type="button" value="请输入" v-if="!count" v-on:click="send1"/> ()

回复
wheatPassersby wheatPassersby
2021-08-10 00:51:31
<input type="button" value="发送" v-if="count" v-on:click="send"/>
<input type="button" value="请输入" v-if="!count" v-on:click="send1"/>
回复
mic1on
2020-05-14 09:21:31

练习1主要就是从内容长度判断是否有内容

send:function(){
    if (this.count > 0) {
        alert('发送成功!');
        this.value = '';
    }else{
        alert('请输入内容');
    }
    },

练习2主要是学习v-if或者v-show
两者不同在于v-if是中表达式不成立不会渲染
v-show是会渲染，通过display来决定是否显示
所以对于频繁显示与否的元素，就可以用v-show提高效率。

<div v-show="count">当前Value值为：{{value}}</div>

回复
CyberFork
2020-01-01 19:01:34

练习一想试一试之前学的js的三元运算，居然成功了。

// 这是新增的方法
        methods: {
            send: function () {
                // 哇，随手用了一个三元运算符
                this.count ? alert('发送成功！') : alert('请输入内容！');

                this.value = ''
            }
        },

回复
LaiTaoGDUT
2019-09-27 19:50:17

第二题其实不用这么麻烦吧？直接在data中加一个emptyChecked: false,然后在addTodo方法里面改变它的真值不就可以了吗
if(!this.newTodoTitle) {
this.emptyChecked = true;
} else {
this.todos.push({id: this.id++, title: this.newTodoTitle});
this.newTodoTitle = "";
this.emptyChecked = false;
}

回复
LaiTaoGDUT LaiTaoGDUT
2019-09-27 19:51:41

但是这样做在输入内容时提示依旧不消失，考虑欠佳了

回复

目录