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

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