*{
list-style: none;
}
li {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 10px;
}
.current {
background-color: #333;
}
- {{item.text}}
up
down
add
remove
let vm = new Vue({
el: '#app',
data: {
items: [
{
id: 1,
text: 'javascript',
show: false
},
{
id: 2,
text: 'c++',
show: false
},
{
id: 3,
text: 'java',
show: false
},
{
id: 4,
text: 'python',
show: false
}
],
current: 0,
currentid: 1
},
created() {
this.items[0].show = true
},
methods: {
up() {
if(this.items.length > 1 && this.current !== 0) {
this.items = this.sort(this.items, this.current, this.current - 1)
this.current -= 1
}
},
down() {
if(this.items.length > 1 && this.current !== this.items.length - 1) {
this.items = this.sort(this.items, this.current, this.current + 1)
this.current += 1
}
},
itemclick(v) {
let arr = this.items
this.current = arr.indexOf(v)
this.currentid = v.id
v.show = true
for (let i = 0; i < this.items.length; i++) {
let item = arr[i]
if(v.id !== item.id) {
item.show = false
}
}
},
sort(arr, idx1, idx2) {
arr[idx1] = arr.splice(idx2, 1, arr[idx1])[0]
return arr
},
add(e, id = 5) {
let self = this,
arr = this.items
let isExist = arr.find(v => {
return v.id === id
})
if(isExist) return
let obj = {
id: 5,
text: 'C#',
show: false
}
obj.show = self.items.length === 0
self.items.push(obj)
if(self.items.length === 0) {
self.currentid = obj.id
}
},
remove() {
let self = this
if(self.items.length === 1) {
self.items = []
}
self.items = self.items.filter(v => {
return v.id !== self.currentid
})
if(self.items.length === 0) return
self.currentid = self.items[0].id
self.items[0].show = true
}
},
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史
1580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
