Toggle div display hidden
1) Part of the dom structure under a single item can be displayed or hidden toggled, and the display/hide of other doms at the same level will not be modified.
template dom structure
<div class="list-item" v-for="(list,index) in jobList">
<p class="job-name">{{}}</p>
<p class="job-info">
<el-checkbox v-model="" @change="checkOne(index)"></el-checkbox>
<span class="info">{{}} {{}}And above {{}}Year or more {{}}-{{}}</span>
<span class="time">Release time：{{}}</span>
<span class="desc" @click="toggle(index)">View Job Description
<i class="up" v-if = ""></i>
<i class="down" v-if = "!"></i>
</span>
</p>
<div class="desc-info" v-if = "">
{{}}
</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:"Sales Director 1"},
{name:"Sales Director 2"},
{name:"Sales Director 3"},
{name:"Sales Director 4"},
{name:"Sales Director 5"},
{name:"Sales Director 6"},
{name:"Sales Director 7"}
],}
},
mounted() {
for(let key in ){
[key].checked = false;
[key].show = false;
}
},
methods:{
toggle(index){
[index].show = ![index].show;
(index,1,[index]); //When you use the index to set an item directly, Vue cannot detect changes in arrays, you can use splice() to solve the problem }
}
}
less style
.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) Switching to display or hide a single item will modify the display/hide of other doms at the same level. Use vue's computed property to compute, click Select, and click again to cancel
template dom structure
selected style
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}">{{}}</span> </div>
script js
export default {
name: 'search',
data(){
cityIndexNum:0,
city:[
{"cityName": 'Beijing', "value": '1'},
{"cityName": 'Shanghai', "value": '2'},
{"cityName": 'Guangzhou', "value": '3'},
{"cityName": 'Shenzhen', "value": '4'},
{"cityName": 'Tianjin', "value": '5'}
]
},
methods:{
handleChoose(index){
= index;
}
},
computed:{
cityNum(){
return ;
}
}
}
2) Switching to display or hide a single item will modify the display/hide of other doms at the same level. Multiple selections, click to select, select, click again, unselect
template dom structure
<div class="right more">
<span v-for="(item, index) in exptIndustry" @click="handleChoose($event,index)" :class="{'choosed':}">{{}}</span>
</div>
js
data(){
return {
industryIndexNum:0,
exptIndustry: [
{
"simpleName": "Internet 1",
"fullName": "Internet 1",
"value": "1",
"defaultName": "Internet 1"
},
{
"simpleName": "Internet 2",
"fullName": "Internet 3",
"value": "2",
"defaultName": "Internet 3"
}
]
}
},
methods:{
handleChoose(e,index){ //Click again to uncheck the status if (("choosed") == -1) {
= "choosed"; //Switch button style } else {
= "";//Switch button style }
if(index==-1){
();
}else{
let check = [index].ischeck;
[index].ischeck = !check;
([index].ischeck)
}
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.