入门仪式_Hello_Vue练习参考答案

2019-01-105850 阅读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 --

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

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

回复