v-if v-else v-else if v-html v-

1.v-if v-else v-else if 的使用
例：

<div class="itany">
   <p v-if="math==0">000000000000</p>
   <p v-else-if="math==1">111111111111</p>
   <p v-else-if="math==2">222222222222</p>
   <p v-else-if="math==3">333333333333</p>
   <p v-else-if="math==4">444444444444</p>
   <p v-else="math==5">555555555555</p>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.itany',
        data:{
            math:Math.floor(Math.random()*(5-0+1)+0)
        }
    })

注释：生成一个随机数，当条件符合任意一个时，执行所要执行的代码

2.v-html和v-text的使用
例：

 <div class="itany">
   <input type="text" v-model="msg">
   <p v-html="msg">{{msg}}</p>
   <p v-text="msg">{{msg}}</p>
 </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.itany',
        data:{
            msg:'hello'
        }
    })
</script>

注释：v-html可以解析标签
v-text不可以解析标签

3.v-once和v-pre的使用
例：

 <div class="itany">
   <input type="text" v-model="msg">
 <!--       v-once  只绑定一次-->
    <p v-once>{{msg}}</p>
    
<!--        v-pre   原样输出-->
    <p v-pre>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'.itany',
        data:{
            msg:"hello vue"
        }
    })
</script>

注释：v-once 为只绑定一次的意思
v-pre 为原样输出的意思

4.v-cloak的使用
例：

<div class="itany">
   <p v-cloak>{{mag}}</p>
 </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'.itany',
        data:{
            mag:'hello Vue'
        },
        beforeMount:function(){
            alert(111);
        }
    })
</script>

注释：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

5.过滤器的使用
例：

<div id="itany">
   <p>{{6|head}}</p>
</div>
<script src="vue.js"></script>
<script>
    Vue.filter('head',function(data){
        if(data<10){
            return "0"+data;
        }else{
            return data;
        }
    })
    new Vue({
        el:'#itany'
    })
</script>

注释：过滤器：对显示在页面上的数据进行处理筛选
全局：
js：
Vue.filter("过滤器的名字",function(参数){
})
html:{{值|过滤器名字}}

局部：

<div class="itany">
    <p>{{5|addZero}}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:".itany",
        filters:{
            addZero:function(data){
                if(data<10){
                    return '0'+data;
                }else{
                    return data;
                }
            }
    }
    })
</script>