Vue 控制div标签

最新推荐文章于 2024-04-20 18:12:06 发布

取名字真难啊。。。

最新推荐文章于 2024-04-20 18:12:06 发布

阅读量701

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39927006/article/details/120968433

版权

一、控制div标签的样式

前端代码：
   <div class="eui-hltabs">
        <div :class="[isClickCom?'tabs-item on':'tabs-item']"  v-on:click = "clickCommunity">
          小区（{{0}}）
        </div>
        <div :class="[isClickIndepBuil?'tabs-item on':'tabs-item']" v-on:click = "clickIndepBuilding">
          独立建筑物（{{0}}）
        </div>
      </div>

定义参数：
  isClickCom:true,               //点击小区样式改变 
  isClickIndepBuil:false,        //点击独立建筑物样式
  
定义方法：
     clickCommunity(){
      this.isClickCom = true;
      this.isClickIndepBuil = false;
    },
    clickIndepBuilding(){
      this.isClickCom = false;
      this.isClickIndepBuil = true;
    },

在这里插入图片描述

二、div v-for 循环给列表配置选中样式

前端：
 <div class="l-item"  v-bind:class="{on:index == comCurrent}"  v-for="(item,index) in list" :key="index" @click="clickCommunityList(index,item)" >
              <div class="imgs"><img src="./images/zwtp.jpg" alt="./images/zwtp.jpg"></div>
              <div class="cons" style="margin-left: 10px;">
                <div class="t">
                  <div class="t1" >
                     <img class="house-qrcode-cls" style="width:25px;height:25px;opacity:0.5;margin-top:-5px;margin-right:5px;" src="./images/qrcode_gray_3.png">
                      <span  class="ellipsis" style="width: 160px;display: inline-block;top: 10px;position: relative;">{{item.name}} </span>
                  </div>
                  <div class="t2">
                    <div class="icon"><img src="./images/hou_pos.png"></div>
                    <div class="t21 ellipsis" style="width:160px;" >{{item.addr}}</div>
                  </div>
                </div>
                <div class="inf">{{item.buildingCount}}幢</div>
              </div>
            </div>
l-item 为默认样式  l-item on 为选中的样式
v-bind:class="{on:index == comCurrent}" 这里是表示如果选中的和索引一样就添加选中

定义参数：
 comCurrent :0,      //默认选中第一个
 
定义方法：
//选中小区列表  
clickCommunityList(index,item){
  //给选中的小区添加样式
  this.comCurrent = index;
},

在这里插入图片描述