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