切換div顯示隱藏

1）單個item下的部分dom結(jié)構(gòu)，顯示或隱藏切換，不會修改其它同級dom的顯示/隱藏

template dom結(jié)構(gòu)

<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'>發(fā)布時間：{{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:'銷售總監(jiān)1'},{name:'銷售總監(jiān)2'},{name:'銷售總監(jiān)3'},{name:'銷售總監(jiān)4'},{name:'銷售總監(jiān)5'},{name:'銷售總監(jiān)6'},{name:'銷售總監(jiān)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]); //當你利用索引直接設(shè)置一個項時,Vue 不能檢測變動的數(shù)組,你可以使用 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結(jié)構(gòu)

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結(jié)構(gòu)

　<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': '互聯(lián)網(wǎng)1','fullName': '互聯(lián)網(wǎng)1','value': '1','defaultName': '互聯(lián)網(wǎng)1' },{'simpleName': '互聯(lián)網(wǎng)2','fullName': '互聯(lián)網(wǎng)3','value': '2','defaultName': '互聯(lián)網(wǎng)3' }] }},methods:{ handleChoose(e,index){ //再次點擊，取消選中狀態(tài) 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) } }}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。