<div id="app">
<span class="btn" @click="sorting = !sorting">click</span>
<div>{{sorting}}</div>
<div v-for="item in sort">{{item.id}}.<span> {{item.name}}</span></div>
</div>
.btn {
background-color: aqua;
}
new Vue({
el: "#app",
data() {
return {
sorting: false,
movieSorting: [
{
id: 1,
name: "GGGG"
},
{
id: 2,
name: "ZZZZ"
},
{
id: 3,
name: "QQQQ"
}
],
movieSortingRev: [
{
id: 3,
name: "QQQQ"
},
{
id: 2,
name: "ZZZZ"
},
{
id: 1,
name: "GGGG"
}
],
}
},
computed: {
sort() {
return this.sorting ? this.movieSorting : this.movieSortingRev
}
},
})
This Pen doesn't use any external CSS resources.