1.循环数组二种方式
获取item数据
v-for="item in message"
获取item数据和index索引
v-for="(item,index) in message"
2.获取对象value数据 key属性名 index 索引
v-for="(value,key,index) in info"
for循环加 :key = "数据"
在修改可以保持性能利用。绑定key数据没修改先显示,当修改了会在原来的位置插入
3.数组响应方法,页面跟着改变
推荐push 和 pop
数组未操作效率高
push()数组最后添加
pop()删除最后一个元素
shift()删除第一个元素
unshift()前面添加元素
sort()排序
reverse() 删除
Vue.set() 全局修改
splice() 删增替换方法,关键第二个元素
全部删除
this.message.splice(0);
替换前三个元素
this.message.splice(0,3,'000','000','000')
增加元素
this.message.splice(1,0,'555')
排序
this.message.sort()
4.不是响应操作
data里面的数据改变,页面没有变化
this.message[0] = '000';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in message" :key="item">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in message">{{item + '-'+ index}}</li>
</ul>
<button @click="add">数组添加</button>
<br />
<ul>
<li v-for="(value,key,index) in info" :key="value">
数据:{{value}}
属性名: {{key}}
索引: {{index}}
</li>
</ul>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
// 遍历数组和对象
message: ['111', '222', '333'],
info: {
id: 1,
name: 'bo',
age: 18,
}
},
methods: {
add() {
// this.message.push('444')
// 通过索引修改元素,不会改变界面
this.message[0] = '000';
// 全部删除
// this.message.splice(0);
// 替换前三个元素
// this.message.splice(0,3,'000','000','000')
//增加元素
// this.message.splice(1,0,'555')
// 排序
// this.message.sort()
}
}
})
</script>
</html>