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

    }) 

  • 相关阅读:
    升级Visual Studio安装已完成,出现警告
    C# 字符串格式
    C# TimeSpan
    git 手册
    Mac clion 远程调试 linux 服务器进程
    C++ 左值引用和右值引用的用处
    Mac OS 快捷键
    MacPorts Guide
    同步异步阻塞非阻塞
    tcp 简单实现
  • 原文地址:https://www.cnblogs.com/denken/p/11130575.html
Copyright © 2011-2022 走看看