Vue切換div顯示隱藏,多選，單選代碼解析

更新時(shí)間：2020年07月14日 10:03:58 作者：小小——開心

這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

切換div顯示隱藏

1）單個(gè)item下的部分dom結(jié)構(gòu)，顯示或隱藏切換，不會(huì)修改其它同級(jí)dom的顯示/隱藏

template dom結(jié)構(gòu)

<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">發(fā)布時(shí)間：{{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:"銷售總監(jiān)1"},
        {name:"銷售總監(jiān)2"},
        {name:"銷售總監(jiān)3"},
        {name:"銷售總監(jiān)4"},
        {name:"銷售總監(jiān)5"},
        {name:"銷售總監(jiān)6"},
        {name:"銷售總監(jiān)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]); //當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí),Vue 不能檢測變動(dòng)的數(shù)組,你可以使用 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）單個(gè)item，顯示或隱藏切換，會(huì)修改其它同級(jí)dom的顯示/隱藏。利用vue的計(jì)算屬性computed 單選，單擊選中，選中后，再點(diǎn)擊無法取消

template dom結(jié)構(gòu)

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）單個(gè)item，顯示或隱藏切換，會(huì)修改其它同級(jí)dom的顯示/隱藏。多選，單擊選中，選中后，再點(diǎn)擊，取消選中

template dom結(jié)構(gòu)

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

data(){
    return {
       industryIndexNum:0,

　　　　　　　　 exptIndustry: [
                    {
                        "simpleName": "互聯(lián)網(wǎng)1",
                        "fullName": "互聯(lián)網(wǎng)1",
                        "value": "1",
                        "defaultName": "互聯(lián)網(wǎng)1"
                    },

　　　　　　　　　　　　{
                        "simpleName": "互聯(lián)網(wǎng)2",
                        "fullName": "互聯(lián)網(wǎng)3",
                        "value": "2",
                        "defaultName": "互聯(lián)網(wǎng)3"
                    }
　　　　　　　　　　]


    }
},
methods:{
  handleChoose(e,index){ //再次點(diǎn)擊，取消選中狀態(tài)
          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)
          } 
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: