zoukankan      html  css  js  c++  java
  • 条件渲染和列表渲染

    vue条件渲染v-if 

    在条件判断时的或与非

    count:0

    <div v-if='count<=10'>判断1:count的值为{{count}}</div> 

    <!--

    and:&&, or:||,非:!= ,等于:== 

    --> 

    <div v-else-if='count>10 && count<15'>判断2:count的值为{{count}}</div> 
    <div v-else='count>=15'>判断2:count的值为{{count}}</div> 

     列表渲染v-for:

       <div v-for='item in list1'>
          <div v-if='item.grant==1' v-bind:style='vstyle'>
               {{item.name}}有权操作!
          </div>
          <div v-else>
               {{item.name}}无权操作!
          </div>
        </div>

     new Vue ({
               el:"#app",
               data:{
                 count:0,
                  list1:[
                  {name:'张三',
                   group:'管理员',
                   grant:1
                  },
                  {name:'李四',
                    group:'操作员',
             grant:2
                  }],
                  vstyle:{
                   color:'red',
                   textShadow:'0 0 5px #232323'
                  },

    }) 

  • 相关阅读:
    memcached使用入门
    winform代码生成器(三)
    Spark + sbt + IDEA + HelloWorld + MacOS
    CentOS下Hive搭建
    36. 有效的数独
    HADOOP依赖
    判别数字图片能否「一笔完成」
    【网易微专业】图表绘制工具Matplotlib
    【18.065】Lecture2
    【18.065】Lecture1
  • 原文地址:https://www.cnblogs.com/denken/p/11130575.html
Copyright © 2011-2022 走看看