you can see the effect by directly copying and pasting: pay attention to understanding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding: 5px 10px;
border: 1px solid gray;
cursor: pointer;
margin-left: 5px;
border-radius: 5px;
}
ul.types li.active {
border: 1px solid -sharp0078d7;
background-color: -sharp0078d7;
color: -sharpfff;
}
ul.selects li.active {
border: 1px solid -sharp0078d7;
background-color: -sharp0078d7;
color: -sharpfff;
}
ul.selects li.disabled {
border: 1px solid -sharp999;
background-color: -sharp999;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="app">
:
<ul class="types">
<li v-for="(item, index) in typesList" :class="{ active: index == result.types_value }" @click="typesEvent(index)">{{item.types}}</li>
</ul>
:
<ul class="selects">
<!-- class -->
<li v-for="(item, index) in selectList" :class="{ disabled: result.types_value != 1 && item.time > 0 , active: result.select.indexOf(item.id) >= 0 }" @click="selectEvent(item)">
{{item.title}}
<span v-if="item.time > 0">{{item.time}}</span>
<span v-else></span>
<span>{{item.price}}</span>
</li>
</ul>
:(id)
{{result.select}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '-sharpapp',
data: {
typesList: [ //
{
types: "",
value: 0
},
{
types: "",
value: 1
},
{
types: "",
value: 2
}
],
selectList: [ //
{
title: "1",
id: 1,
time: 55,
price: 12
},
{
title: "2",
id: 2,
time: 0,
price: 22
},
{
title: "3",
id: 3,
time: 5,
price: 102
},
{
title: "4",
id: 4,
time: 0,
price: 120
}
],
result: { //
types_value: 0,
select: []
}
},
methods: {
typesEvent(index) { //
if(index == this.result.types_value) {
return false; //
}
this.result.select = []; //
this.result.types_value = index; //active
},
selectEvent(item) {
let _this = this;
if(_this.result.types_value != 1 && item.time > 0) { //
return false;
}
if(_this.result.types_value == 0) { //,
_this.result.select = _this.result.select.indexOf(item.id) >= 0 ? [] : [item.id];
return true;
}
let buff_id = _this.result.select.indexOf(item.id); //
if(buff_id >= 0) {
_this.result.select.splice(buff_id,1);
return true;
}
_this.result.select.push(item.id); //
return true;
}
}
});
</script>
</body>
</html>
< hr >
Vuex version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding: 5px 10px;
border: 1px solid gray;
cursor: pointer;
margin-left: 5px;
border-radius: 5px;
}
ul.types li.active {
border: 1px solid -sharp0078d7;
background-color: -sharp0078d7;
color: -sharpfff;
}
ul.selects li.active {
border: 1px solid -sharp0078d7;
background-color: -sharp0078d7;
color: -sharpfff;
}
ul.selects li.disabled {
border: 1px solid -sharp999;
background-color: -sharp999;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="app">
:
<ul class="types">
<li v-for="(item, index) in typesList" :class="{ active: index == types_value }" @click="typesEvent(index)">{{item.types}}</li>
</ul>
:
<ul class="selects">
<!-- class -->
<li v-for="(item, index) in selectList" :class="{ disabled: types_value != 1 && item.time > 0 || types_value == 1 && item.time <= 0, active: store.getters.getSelectId(item.id) }" @click="selectEvent(item)">
{{item.title}}
<span v-if="item.time > 0">{{item.time}}</span>
<span v-else></span>
<span>{{item.price}}</span>
</li>
</ul>
:(id)
{{store.state.result}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>
const store = new Vuex.Store({
state: {
types_value: 0,
result: []
},
mutations: {
saveResult(state, payload) {
state.result = payload.data;
},
saveTypesValue(state, payload) {
state.types_value = payload.index;
},
deleteResult(state, payload) {
for(let i = 0; i < state.result.length; iPP) {
if(state.result[i].id === payload.id) {
state.result.splice(i,1);
break;
}
}
},
pushResult(state, payload) {
state.result.push(payload.data);
}
},
getters: {
getSelectId: (state) => (id) => {
return state.result.find(item => item.id === id);
}
}
});
new Vue({
el: '-sharpapp',
data: {
typesList: [ //
{
types: "",
value: 0
},
{
types: "",
value: 1
},
{
types: "",
value: 2
}
],
selectList: [ //
{
title: "1",
id: 0,
time: 55,
price: 12
},
{
title: "2",
id: 1,
time: 0,
price: 22
},
{
title: "3",
id: 2,
time: 5,
price: 102
},
{
title: "4",
id: 3,
time: 0,
price: 120
}
]
},
computed: {
types_value() {
return store.state.types_value;
}
},
methods: {
typesEvent(index) { //
if(index == this.types_value) {
return false; //
}
store.commit({
type: "saveResult",
data: []
}) //
store.commit({
type: "saveTypesValue",
index: index
}) //active
},
selectEvent(item) {
let _this = this;
if(_this.types_value != 1 && item.time > 0 || _this.types_value == 1 && item.time <= 0) { //
return false;
}
if(_this.types_value == 0) { //,
store.commit({
type: "saveResult",
data: store.getters.getSelectId(item.id) ? [] : [_this.selectList[item.id]]
});
return true;
}
if(store.getters.getSelectId(item.id)) {
store.commit({
type: "deleteResult",
id: item.id
});
return true;
}
store.commit({
type: "pushResult",
data: _this.selectList[item.id]
}); //
return true;
}
}
});
</script>
</body>
</html>
< hr >
I hope my answer will be helpful to you!
according to the type selected, either drop the direct Filter that does not meet the requirements directly, or judge when you click
