如何动态绑定class

最新推荐文章于 2024-11-28 07:24:01 发布

村里的大鹅

最新推荐文章于 2024-11-28 07:24:01 发布

阅读量154

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_49302285/article/details/125308810

版权

1.HTml

   <div class="good-title">
                  <span :class="img(item.types[0])"></span>
                  <span class="single-line-ellipsis">{{ item.courseName }}</span>
                </div>

2.js

    img(type) {
      // console.log(type)
      if (type === 1) {
        return 'video'
      } else if (type === 3) {
        return 'voice'
      } else if (type === 2) {
        return 'pic'
      }
    },

3.css

    .voice {
            background-image: url(../../../assets/images/home/voice.png);
            background-size: 100%;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

          .video {
            background-image: url(../../../assets/images/home/play.png);
            background-size: 100%;
            width: 16px;
            height: 16px;
            display: inline-block;

          }

          .pic {
            background-image: url(../../../assets/images/home/tuwen.png);
            background-size: 100%;
            width: 16px;
            height: 16px;
            display: inline-block;

          }