美文网首页
vue 实现动态绑定class属性

vue 实现动态绑定class属性

作者: web30 | 来源:发表于2020-06-30 18:04 被阅读0次
    最终效果图:
    效果图
    需求:

    当点击其中一个div时,1.背景图切换;2.绿色的小icon变成白色;3.字体变成白色

    环境:

    vue2

    代码:
    <template>
        <div style="position: relative;">
          <div style="margin-top: 14%">
            <img style="width: 100%;" :src="imgUrl" >
          </div>
          <div style="position: absolute;top:11%;right: 65%;left: 19%;width: 16.5%;">
            <div @click="imgClick(0)" :class="[{bk:active0},{organ:!active0}]">
              <img style="vertical-align: middle;margin:5% 5% 5% -20%" :src="smallImgUrl0" />
              <span align="left" class="font" :class="[{font:active0},{content:!active0}]">机构随心<br>
                <span class="color" :class="[{color:active0},{content_color:!active0}]">1000+机构覆盖全国</span>
              </span>
            </div>
    
            <div @click="imgClick(1)" :class="[{bk:active1},{organ:!active1}]">
              <img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl1" />
              <span align="left" :class="[{font:active1},{content:!active1}]">家属预约<br>
                <span :class="[{color:active1},{content_color:!active1}]">添加家属享受体检折扣</span>
              </span>
            </div>
    
            <div @click="imgClick(2)" :class="[{bk:active2},{organ:!active2}]">
              <img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl2" />
              <span align="left" :class="[{font:active2},{content:!active2}]">报告查询<br>
                <span :class="[{color:active2},{content_color:!active2}]">在线领取报告免费解读</span>
              </span>
            </div>
    
            <div @click="imgClick(3)" :class="[{bk:active3},{organ:!active3}]">
              <img style="vertical-align: middle;margin: 5% 5% 5% -8%" :src="smallImgUrl3" />
              <span align="left" :class="[{font:active3},{content:!active3}]">在线问诊<br>
                <span :class="[{color:active3},{content_color:!active3}]">各科室名医在线问诊咨询</span>
              </span>
            </div>
    
            <div @click="imgClick(4)" :class="[{bk:active4},{organ:!active4}]">
              <img style="vertical-align: middle;margin: 5% 5% 5% -4%" :src="smallImgUrl4" />
              <span align="left" :class="[{font:active4},{content:!active4}]">企业看板<br>
                <span :class="[{color:active4},{content_color:!active4}]">企业员工健康数据一目了然</span>
              </span>
            </div>
          </div>
        </div>
    </template>
    
    <script>
    export default {
      name: 'Index',
      data () {
        return {
          // 机构随心
          // 字体颜色/icon
          active0: false,
          active1: false,
          active2: false,
          active3: false,
          active4: false,
          imgList: [require('../assets/P机构随心.png'), require('../assets/P家属预约.png'), require('../assets/P报告查询.png'), require('../assets/P在线问诊.png'), require('../assets/P企业看板.png')],
          imgUrl: require('../assets/P机构随心.png'),
          smallIconUrlGreen: [require('../assets/i机构(绿).png'), require('../assets/i预约(绿).png'), require('../assets/i查询报告(绿).png'), require('../assets/i问诊(绿).png'), require('../assets/i看板(绿).png')],
          smallIconUrlWhite: [require('../assets/i机构(白).png'), require('../assets/i预约(白).png'), require('../assets/i查询报告(白).png'), require('../assets/i问诊(白).png'), require('../assets/i看板(白).png')],
          // 默认初始小icon是绿色
          smallImgUrl0: require('../assets/i机构(绿).png'),
          smallImgUrl1: require('../assets/i预约(绿).png'),
          smallImgUrl2: require('../assets/i查询报告(绿).png'),
          smallImgUrl3: require('../assets/i问诊(绿).png'),
          smallImgUrl4: require('../assets/i看板(绿).png'),
        }
      },
      methods: {
        // 由于代码太长,这里只贴出index==0,后面的实现一样
    
        imgClick (index) {
          // 当索引==0时
          if (index == 0) {  
            // 同时切换对应的背景图
            this.imgUrl = this.imgList[index] 
            // 同时切换对应的小的白色icon,另外其它4个保持绿色不变
            this.smallImgUrl0 = this.smallIconUrlWhite[index]
            this.smallImgUrl1 = this.smallIconUrlGreen[1]
            this.smallImgUrl2 = this.smallIconUrlGreen[2]
            this.smallImgUrl3 = this.smallIconUrlGreen[3]
            this.smallImgUrl4 = this.smallIconUrlGreen[4]
            // 当active0 = true,当前点击的div颜色变成绿色,其它保持白色不变,以及字体颜色不变
            this.active0 = true
            this.active1 = false
            this.active2 = false
            this.active3 = false
            this.active4 = false
          }
        }
      }
    }
    </script>
    
    <style scoped>
      /*icon*/
      .bk{
        background: #019A92;text-align: center;cursor: pointer;margin-top: 10%
      }
      .organ{
        background-color: #FFFFFF;text-align: center;cursor: pointer;margin-top: 10%
      }
      /*字体颜色*/
      .font{
        font-size: 100%; color: #FFFFFF;display: inline-block;vertical-align: middle
      }
      .content{
        font-size: 100%; color: #019A92;display: inline-block;vertical-align: middle
      }
      .color{
        font-size: 80%;color: #FFFFFF;
      }
      .content_color{
        font-size: 80%;color: #7D7D7D;
      }
    </style>
    

    我这个实现方法是比较傻瓜式的,如大家有更巧妙或更高明的办法欢迎留言告诉我,一起学习~~

    相关文章

      网友评论

          本文标题:vue 实现动态绑定class属性

          本文链接:https://www.haomeiwen.com/subject/kfixqktx.html