蝙蝠岛资源网 Design By www.hbtsch.com
切换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) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue切换div显示隐藏,多选,单选代码解析的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]