如果数据为空则显示HTML

Question

HTML:

<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li v-repeat="todos" v-on="click: done = !done" class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
</div>

JS:

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [] //testing with data use: [{done:false,content:'testing'}]
    }
});

或者:http://jsfiddle.net/ksumarine/yMv7y/301/

如果数据显示为空,我想显示"此时没有待办事项"或类似内容.我无法弄清楚如何做到这一点.

此外,当我在我的应用程序中有类似的东西时,我会在Vue将其替换为数据之前在页面上看到胡子绑定.有关如何隐藏用户绑定的任何想法？

谢谢您的帮助!

Answer 1

v-if="!todos.length"只有当todos数组为空时,才能使用此消息显示.

对于闪存绑定,v-cloak与CSS规则一起使用以隐藏它直到编译完成.

合并示例:http://jsfiddle.net/yMv7y/304/