1、循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1. 在遍历数组的过程中，没有使用索引值(下标值) -->
<ul>
<li v-for="item in name">{{item}}</li>
</ul>
<!-- 2. 在遍历数组的过程中，获取索引值 -->
<ul>
<li v-for="(item, index) in name">
{{index}}.{{item}}
</li>
</ul>
<!-- 3. 遍历对象, 如果只是获取一个值，那么获取到的值是 value -->
<ul>
<li v-for="item in info">
{{item}}
</li>
</ul>
<!-- 4. 遍历对象, 获取 key 和 value -->
<ul>
<li v-for="(value, key) in info">
{{key}}: {{value}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: ['kobe', 'james', 'curry'],
info: {
name: 'kobe',
age: 18,
height: 1.88
}
}
})
</script>
</body>
</html>
2、检查数组更新
因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动检测数据变化，视图会发生对应的更新；
Vue 中包含一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
| 方法 | 描述 |
|---|---|
| push() | 插入元素 |
| pop() | 删除数组中的最后的一个元素 |
| shift() | 删除数组中的第一个元素 |
| unshift() | 在数组最前面添加元素 |
| splice() | 删除元素 / 插入元素 / 替换元素 |
| sort() | 排序 |
| reverse() | 反转元素 |
splice 使用
删除元素：第二个参数传入要删除几个元素（如果没有传，就删除后面所有的元素）
替换元素：第二个参数，表示要替换几个元素，后面是用于替换前面的元素
插入元素：第二个参数，传入 0，并且后面跟上要插入的元素
// 删除元素
this.letters.splice(0, 3)
// 替换元素
this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
// 插入元素
this.letters.splice(1, 0, 'x', 'y', 'z')
扫一扫
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
