(编辑:jimmy 日期: 2024/10/30 浏览:2)
切换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) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。