条件渲染和列表渲染

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