<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items" :key="index">{{item}}---->{{index}}</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: ['zhangsan', 'lisi', 'wangwu']
}
});
// 为数组添加元素
vm.items.push('yello');
// 对数组进行排序
vm.items.sort();
// 对数组进行逆向排序
vm.items.reverse();
// splice(index,len,[item])
// index:数组开始下标
// len: 替换/删除的长度
// item:替换的值，删除操作的话item为空。
vm.items.splice(1,0,"gou");
</script>
</body>
</html>
2、替换元素示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items" :key="index">{{item}}---->{{index}}</li>
<li v-for="obj,key in objs">{{obj}}---{{key}}</li>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: ['zhangsan', 'lisi', 'wangwu'],
objs: { name: "goudan" }
}
});
// vm.$set(vm.items, indexOfItem, newValue) 数组 替换元素/增加元素
vm.$set(vm.items, 2, 'goudan');
// vm.$set(vm.objs,'增加的属性名',属性值)对象新增/修改值
vm.$set(vm.objs, 'age', 20)；
// 为一个对象增加多个属性
vm.objs = Object.assign({}, vm.objs, {
school: '地球学院', addr: '光之国'
});
</script>
</body>
</html>