- v-once 只执行一次
v-pre 输出源代码
例子：
html:
<div class="itany">
<input type="text" v-model="mas">
<p v-once>{{mas}}</p>
<p v-pre>{{mas}}</p>
</div>
js:
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
mas:"你好，Vue"
}
})
</script>
-
v-html 与 v-text 的区别是v-html会自动解析标签，而v-text 不可以解析标签
例子：
html：<div class="itany"> <input type="text" v-model="mas"> <p v-html="mas">{{mas}}</p> <p v-text="mas">{{mas}}</p> </div> js: <script src="vue.js"></script> <script> new Vue({ el:".itany", data:{ mas:"你好，Vue" } }) </script> -
v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
例子：
html：<div class="itany"> <p v-cloak>{{mas}}</p> </div> css： [v-cloak] { display: none; } js： <script src="vue.js"></script> <script> new Vue({ el:".itany", data:{ mas:"你好" }, beforeMount:function(){ alert('111111111111') } }) -
v-if v-else v-else-if
例子：
html：<div class="itany"> <p v-if="num==0">0000000000</p> <p v-else-if="num==1">1111111111111111</p> <p v-else-if="num==2">22222222222</p> <p v-else="3">3333333333333333</p> </div> js: <script src="vue.js"></script> <script> new Vue({ el:'.itany', data:{ num:Math.floor(Math.random()*(3-0+1)+0) } }) </script>
5.v-filter 过滤器的使用
例：
html：
<div id="itany">
<p>{{6|head}}</p>
</div>
js：
<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>
v-filter过滤器：对显示在页面上的数据进行处理筛选
js解释：
// 全局过滤器
Vue.filter("过滤器的名字",function(参数){
})
html:{{值|过滤器名字}}
// 局部过滤器
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
filters:{
// zero 是过滤器的名字 function（参数）
zero:function(data){
return 一个值
}
}
})
</script>