vue对数组的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用计算属性翻转数组</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="items in newsList" >{{items.title}}:{{items.date}}</li>
</ul>
<!--<button @click='reverseNews'>倒叙</button>-->
</div>
<script>
/*var newsList = [
{title:'第一步',date:'2018/7/18'},
{title:'第二步',date:'2018/7/19'},
{title:'第三步',date:'2018/7/20'},
{title:'第四步',date:'2018/7/21'}
];*/
var app = new Vue({
el:'#app',
data:{
newsList:[
{title:'第一步',date:'2018/7/18'},
{title:'第二步',date:'2018/7/19'},
{title:'第三步',date:'2018/7/20'},
{title:'第四步',date:'2018/7/21'}
]
},
/*computed:{
reverseNews:function(){
return this.newsList.reverse();
}
}*/
});
//向数组中增加东西
//app.newsList.push({title:'第四步',date:'2018/7/21'});
//对数组进行翻转
//app.$set(app.newsList.reverse())
//删除一个，增加一个
//app.newsList.splice(2,1,{title:'第si步',date:'2018/7/20'})
</script>
</body>
</html>2、调用splice方法：
this.arr.splice(index, 1, val);
index:代表数组下标从第几个开始，包括这个下标
1：代表删除一个
value:代表增加这一个值
3.合并数组
this.arr = this.arr.concat(anotherArr);
4.修改数组，vue触发数组改变，视图更新
push() //往数组后面放东西
pop()
shift()
unshift()
splice() //无论何时，使用该方法删除元素时注意数组长度有变化
sort()
reverse()
5.v-in对于对象的操作
<ul id="v-for-object" class="demo">
<li v-for="(value,index) in object">
{{ value }}:{{index}}
</li>
</ul>new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'wayne',
lastName: 'Judy',
age: 18
}
}
})打印出来的结果：
- Judy:firstName
- wayNei:lastName
- 20:age