如果数据为空则显示 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/

如果数据返回为空，我想显示 "No todos at this time" 或类似的内容。我不知道该怎么做。

此外，当我的应用程序中有与此类似的内容时，我会在 Vue 将其替换为数据之前在页面上看到小胡子绑定。关于如何对用户隐藏绑定有什么想法吗？

感谢您的帮助！

Answer 1

您可以使用v-if="!todos.length"使消息仅在待办事项数组为空时显示。

对于 flash 绑定，使用 v-cloak 和 CSS 规则一起隐藏它，直到编译完成。

组合示例：http://jsfiddle.net/yMv7y/304/

如果数据为空则显示 HTML

Displaying HTML if data is empty

javascript

vue.js