条件渲染和列表渲染

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'
              },

}) 

原文地址:https://www.cnblogs.com/denken/p/11130575.html