Vue切换div显示隐藏,多选，单选代码解析

切换div显示隐藏

1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏

template dom结构

<div class="list-item" v-for="(list,index) in jobList">
          <p class="job-name">{{list.jobName}}</p>
          <p class="job-info">
            <el-checkbox v-model="list.checked" @change="checkOne(index)"></el-checkbox>
            <span class="info">{{list.locationDesc}} {{list.minDegreeDesc}}及以上  {{list.minExp}}年以上 {{list.jobMinSalary}}-{{list.jobMaxSalary}}</span>
            <span class="time">发布时间：{{list.refreshTime}}</span>   
            <span class="desc" @click="toggle(index)">查看职位描述
              <i class="up"  v-if = "list.show"></i>
              <i class="down"  v-if = "!list.show"></i>
            </span>          
          </p>
          <div class="desc-info" v-if = "list.show">
            {{list.jobDesc}}
          </div>
        </div>

script js

<script>
import api from '@/axios/api'
export default {
  name: 'jobImport',
  data(){
    return{ 
      companyName:'',
      checkedAll:false, 
      isShow: true,
      checkedNum:0,
      num:'-1',
      jobList:[
        {name:"销售总监1"},
        {name:"销售总监2"},
        {name:"销售总监3"},
        {name:"销售总监4"},
        {name:"销售总监5"},
        {name:"销售总监6"},
        {name:"销售总监7"}
      ],}
    },
    mounted() {
      for(let key in this.jobList){
       this.jobList[key].checked = false;
       this.jobList[key].show = false;
      } 
    },
　　　　methods:{
　　　　　　toggle(index){
      　　this.jobList[index].show = !this.jobList[index].show;
      　　this.jobList.splice(index,1,this.jobList[index]); //当你利用索引直接设置一个项时,Vue 不能检测变动的数组,你可以使用 splice()解决
    　 }
　　  }
}

less 样式

.list-item{
          padding-top:20px;          
          .job-name{
            font-size:16px;
            color:#333333;
            font-weight: 800;
          }
          .job-info{
            margin-top: 12px;
            padding-bottom:20px;
            border-bottom: 1px dashed #eeeeee;
            font-size:14px;
            color:#333333;
            .info{
              margin-left: 10px;
            }
            .time{
              margin-left: 130px;
            }
            
          }
          .desc{
            float: right;
            color:#ff6500;
            cursor: pointer;
            .up{
              display: inline-block;
              margin-left: 12px;
              vertical-align: middle; 
              width: 11px;
              height: 6px;
              background: url("../img/icon_up.png") no-repeat;
             }
             .down{
              display: inline-block;
              margin-left: 12px;
              vertical-align: middle;
              width: 11px;
              height: 6px;
              background: url("../img/icon_down.png") no-repeat;
             }
          }
          .desc-info{
            padding: 12px; 
            background: #f8f9fb;
          }
        }

2）单个item，显示或隐藏切换，会修改其它同级dom的显示/隐藏。利用vue的计算属性computed 单选，单击选中，选中后，再点击无法取消

template dom结构

choosed 选中样式

span{
            display: inline-block; 
            padding-left:10px;
            padding-right: 10px;
            margin-bottom: 10px;
            margin-left: 5px;
            margin-right: 5px;
            min-width:44px;
            height:26px;
            text-align: center;
            line-height: 26px;
            color:#333;
            font-size:14px; 
            cursor: pointer;
            &.choosed{
              background:#ff6500;
              border-radius:2px;
              color: #fff;
            }
          }

<div class="right hotcity-box">
  <span v-for="(city,index) in city" @click="handleChoose(index)" :class="{'choosed':cityNum == index}">{{city.cityName}}</span> </div>

script js

export default {
  name: 'search',
  data(){
      cityIndexNum:0,
      city:[
        {"cityName": '北京', "value": '1'},
      　　{"cityName": '上海', "value": '2'},
      　　{"cityName": '广州', "value": '3'},
      　　{"cityName": '深圳', "value": '4'},
      　　{"cityName": '天津', "value": '5'}
       ]
    },
    methods:{
       handleChoose(index){ 
    　　　　this.cityIndexNum = index;
       }     
    },
    computed:{
      cityNum(){
       return this.cityIndexNum;
      }
    }
}

2）单个item，显示或隐藏切换，会修改其它同级dom的显示/隐藏。 多选，单击选中，选中后，再点击，取消选中

template dom结构

　　　　　　　　　　　<div class="right more"> 
            <span v-for="(item, index) in exptIndustry" @click="handleChoose($event,index)" :class="{'choosed':item.ischeck}">{{item.fullName}}</span>
          </div>

js

data(){
    return {
       industryIndexNum:0,

　　　　　　　　 exptIndustry: [
                    {
                        "simpleName": "互联网1",
                        "fullName": "互联网1",
                        "value": "1",
                        "defaultName": "互联网1"
                    },

　　　　　　　　　　　　{
                        "simpleName": "互联网2",
                        "fullName": "互联网3",
                        "value": "2",
                        "defaultName": "互联网3"
                    }
　　　　　　　　　　]


    }
},
methods:{
  handleChoose(e,index){ //再次点击，取消选中状态
          if (e.target.className.indexOf("choosed") == -1) {
            e.target.className = "choosed"; //切换按钮样式 
          } else {
            e.target.className = "";//切换按钮样式 
          }
          if(index==-1){
            this.industryDataInit();
          }else{
            let check = this.exptIndustry[index].ischeck;
            this.exptIndustry[index].ischeck = !check; 
            console.log(this.exptIndustry[index].ischeck)
          } 
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。