{{ msg }}
Home
List
{{item.title}}
删除
向上↑
向下↓
export default {
name: 'list',
data () {
return {
msg: 'list',
newsList: [
{
id: 1,
title: '11111',
descript: 'descript1'
},
{
id: 2,
title: '22222',
descript: 'descript2'
},
{
id: 3,
title: '33333',
descript: 'descript3'
},
{
id: 4,
title: '44444',
descript: 'descript4'
}
]
}
},
methods: {
del (index) {
this.newsList.splice(index, 1)
},
sortUp (index) {
if (index === 0) {
alert('到顶了！')
} else {
this.newsList.push(this.newsList.shift())
}
},
sortDown (index) {
if (index === (this.newsList.length - 1)) {
alert('到底了！')
} else {
this.newsList.unshift(this.newsList.pop())
}
}
}
}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
}
li {
width: 500px;
border: 1px solid #ccc;
margin: 10px;
line-height: 30px;
height: 30px;
padding: 5px;
}
a {
color: #42b983;
}
.operate {
float: right;
}
.operate span:first-of-type {
color: #f00;
}
.operate span {
cursor: pointer;
color: #42b983;
}
效果如下：
1.jpg
使用了相关的数组方法：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
