Skip to content

Latest commit

 

History

History
28 lines (21 loc) · 959 Bytes

File metadata and controls

28 lines (21 loc) · 959 Bytes

第 1 篇:很高兴认识你 Vue.js

练习一

需在 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 不被渲染)。