Displaying HTML if data is empty

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'}]
    }
});

Or: http://ift.tt/1awG01t

I would like to display "No todos at this time" or something similar if the data comes back as empty. I can't figure out how to do this.

Also, when I have something similar to this in my app, I see the mustache bindings on the page before Vue replaces it with the data. Any thoughts on how to hide the bindings from the user?

Thanks for the help!