Vue 전환 div 표시 숨기기, 다중 선택, 단일 코드 확인

div 표시 숨기기 전환
1) 단일 item 아래의 일부dom 구조, 표시 또는 숨기기 전환, 다른 동급dom의 표시/숨기기 수정 없음
templatedom 구조

<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 단선을 선택하고 선택을 누르면 취소할 수 없습니다
templatedom 구조
선택 스타일 선택

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의 표시/숨기기를 수정합니다.다중 선택, 선택 클릭, 선택 후, 다시 클릭, 선택 취소
templatedom 구조

　　　　　　　　　　　<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)
          } 
  }
}

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.