Vue切换div显示隐藏,多选，单选代码解析

切换div显示隐藏

1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏

template dom结构

<div 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 @click='toggle(index)'>查看职位描述 <i v-if = 'list.show'></i> <i v-if = '!list.show'></i> </span> </p> <div 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) } }}

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