Vue:v-if v-else-if v-else v-html v-text v-cloak v-once v-pre 过滤器

v-if v-else-if v-else 都是判断语句
案例:如果生成的随机数是0输出我是0,如果生成的随机数是1输出我是1,如果生成的随机数是2输出我是2,如果生成的随机数是3输出我是3,如果生成的随机数是4输出我是4,如果生成的随机数是5输出我是5
v-else元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
类似于 v-else,v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

<div id="app">
   <p v-if='num==0'>我是0</p>
   <p v-else-if='num==1'>我是1</p>
   <p v-else-if='num==2'>我是2</p>
   <p v-else-if='num==3'>我是3</p>
   <p v-else-if='num==4'>我是4</p>
   <p v-else='num==5'>我是5</p>
</div>
<script src='../js/vue.js'></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:Math.floor(Math.random()*(5-0+1)+0)//随机数
        }
    })
</script>

v-html:操作元素中的HTML标签
v-text:操作元素的纯文本
案例:

<div id="app3" v-html='message'>
   {{ message }}
</div>
new Vue({
    el : "#app3",
    data : {
         message :'<b>哈</b>'
     }
 })

结果:输出加粗的哈,而不是输出<b>哈</b>,可以解析HTML元素

<div id="app3" v-html='message'>
   {{ message }}
</div>
new Vue({
    el : "#app3",
    data : {
         message :'<b>哈</b>'
     }
 })

结果:输出<b>哈</b>,v-text不能解析HTML元素,只会照样输出

v-cloak:使用 v-cloak 防止页面加载时出现 vuejs 的变量名
body部分:

<div id="app">
   <p v-cloak>{{message}}</p>
</div>

style部分:使用v-cloak时必须配合style中的display:none使用

[v-cloak]{
     display: none;
}

js部分:

new Vue({
        el:'#app',
        data:{
            message:'Hello Vue.js'
        },
        beforeMount:function(){
          alert(111)
        }
 })

v-once:只绑定一次
pre:原样输出

案例:
body部分:

<div id="app">
   <input type="text" v-model='message'>
 <!--       只绑定一次-->
      <p v-once>{{message}}</p>
 <!--       原样输出-->
   <p v-pre>{{message}}</p>
</div>

js部分:

    new Vue({
        el:'#app',
        data:{
            message:'Hello World!'
        }
    })

过滤器:全局过滤器

过滤器可以用在两个地方:双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示

      Vue.filter('addZero',function(data){
        if(data<10){
            return '0'+data;
        }else{
            return data;
        }
    })

局部过滤器:

new Vue({
        el:'#app',
        data:{},
        methods:{},
        filters:{
            addZero:function(data){
                if(data<10){
                    return '0'+data;
                }else{
                    return data;
                }
            }
        }
    })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问题代码 两个textField的rightView共用一个imageView对象,程序会无法运行,必须为不同的对...
    张俊凯阅读 623评论 0 0
  • 听说老死不相往来的人 在今天最有可能突然遇见 今天是儿童节 睡觉之前记得擦亮眼睛。
    留子尧阅读 233评论 1 5
  • 1 前几天晚上我发了这样一条朋友圈:世上最幸福的事就是独处了,现在感觉一个人呆着就是神仙般的日子。 引来无数点赞,...
    江城子912阅读 1,115评论 8 11
  • 上周五陪远道而来的朋友去潮汐湖去看樱花。花季刚过,绕湖一周,只有少数几棵树还剩有残花,在倒春寒的湖边的冷风里瑟缩着...
    生活在华盛顿阅读 296评论 0 0
  • 有时候觉得,生活就只能用残忍来形容。 有一些事情,你就是这么无能为力,真的是无能为力,但是你还不能在当事人面前表现...
    阳光下的朱丽叶阅读 177评论 2 1