用法 :循环渲染数组/对象
<!--
v-for用法:
item in Array
(item, index) in Array
value in Object
(value, key, index) in Object
:key属性具有唯一性,不能重复,它能够唯一标识数组的每一项
将来数据中的某一项的值发生了改变,则v-for只会更新当前项对应的这个dom元素的值,而不是更新整个数据,从而提高效率,参考https://www.zhihu.com/question/61064119/answer/183717717
注意:以下变动不会触发视图更新
1. 通过索引给数组设置新值
2. 通过length改变数组
解决:
1. Vue.set(arr, index, newValue)
2. arr.splice(index, 1, newValue)
-->
<ul>
<li v-for="item in user">{{item.name}}</li>
<li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
<li>---------------华丽的分割线---------------</li>
<li v-for="value in boss">{{value}}</li>
<li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
user: [
{name: 'jack'},
{name: 'neil'},
{name: 'rose'}
],
boss: {
name: '马云',
age: 50,
money: 1000000002030
}
}
})
</script>