<!-- 简单输出，会随模型中的值变化 -->
<span>Message: {{ msg }}</span>

<!-- 显示的值不会再发生变化 -->
<span v-once>This will never change: {{ msg }}</span>

<!-- div中内容将被替换为rawhtml -->
<div v-html="rawHtml"></div>

<!-- v-bind设置属性 -->
<div v-bind:id="dynamicId"></div>

<!-- isButtonDisable 是模型中的函数，根据它的真假给属性赋值 -->
<button v-bind:disabled="isButtonDisabled">Button</button>

<!-- 每个绑定只能包含单个表达式 -->
<div v-bind:id="'list-' + id"></div>
<!-- 反例
这是语句，不是表达式 
{{ var a = 1 }}
流控制也不会生效，请使用三元表达式 
{{ if (ok) { return message } }}
-->

<!-- 条件显示 -->
<p v-if="seen">Now you see me</p>

<!-- 绑定动作和属性 -->
<a v-bind:href="url"></a>
<a v-on:click="doSomething">

<!-- 修饰器 执行时条件？ -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 过滤器使用 -->
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器例子

<div id='app-9'>
        <p>{{ message | capitalize  }}</p>
        <div v-bind:id="rawId | formatId">{{ rawId | formatId(addformat) }}</div>
        <input v-model='message'></input>
        <input v-model='rawId'></input>
        <input v-model='addformat'></input>
</div>

var app9 = new Vue({
                    el : '#app-9',
                    data : {
                        message : 'abcedfg',
                        rawId : '246L',
                        addformat : ''
                    },
                    filters :{
                        capitalize : function (value){
                            if (!value) return '';
                            value = value.toString();
                            return value.toUpperCase();
                        },
                        formatId : function (Id, add){
                            if (!Id) return "No Id";
                            if (Id.indexOf('L')!==Id.length-1) return 'Error Id';
                            return add + Id.substr(0, Id.length-1);
                        }
                    }
    });