zoukankan      html  css  js  c++  java
  • vue中用数组语法绑定class

    简单的绑定class就不说了,它可以和对象语法一样,使用data、computed、methods三种方法。说一下我在工作里体会到这种作法的好处。那么直接上代码。。。咔咔咔

    说下需求,我是做一个显示框,当status为1时,代表成功状态,这个时候显示成功图片;当status为0时,代表失败状态,这个时候显示失败图片。我一开始的做法呢是使用v-if,这会才上代码看看,咳、咳

    <div v-if="status===0">
          <img src="../images/failed.png" class="imgIcon">
    </div>
     <div v-else>
          <img src="../images/success.png" class="imgIcon">
    </div>
    

     这样子做呢,也不是不行哈,换个思路用绑定class写

       html:

    <div :class="classes"></div>

     js:

    computed: {
          classes () {
               return [
                   'imgIcon',
                    {
                         ['imgIcon-' + this.status]: this.status !== ''
                    }
                ]
          }
    }
    

     css:

    .imgIcon{
         2.6rem;
        height: 2.6rem;
        margin: auto 0;
    }
    .imgIcon-1{
        background: url(../assets/images/success.png) no-repeat center/cover;    
    }
    .imgIcon-0{
        background: url(../assets/images/failed.png) no-repeat center/cover;
    }
    

     

    后来想了想,就替换img标签里src的值也可以

       html

    <img :src="imgName" class="imgIcon">
    

     js

    computed: {
           imgName () {
                return this.status ? "../images/success.png": "../images/success.png"
         }
    }  

     不过这里要特别注意一下图片的路径问题哦,不然可能不显示。

    以上呢,是我工作中遇到的问题,可能解决思路不是很好,做个记录。

     

  • 相关阅读:
    【Codeforces 349B】Color the Fence
    【Codeforces 459D】Pashmak and Parmida's problem
    【Codeforces 467C】George and Job
    【Codeforces 161D】Distance in Tree
    【Codeforces 522A】Reposts
    【Codeforces 225C】Barcode
    【Codeforces 446A】DZY Loves Sequences
    【Codeforces 429B】Working out
    【Codeforces 478C】Table Decorations
    【Codeforces 478C】Table Decorations
  • 原文地址:https://www.cnblogs.com/ddkei/p/9362151.html
Copyright © 2011-2022 走看看