<template>
<div class="hello">
<ul>
<!-- 条件渲染方法:v-for类似循环,把数据存入到一个对象中 -->
<li v-for="item in newsList">{{item}}</li>
<!-- 既然是对象,就可以使用其中的内容 -->
<li v-for="item in newsList">{{item.title}}</li>
<!--
维护状态: 当Vue更新列表时,默认使用"就地更新"的策略
就地更新: 只更新 元素唯一标识的id发生改变或新增的元素,其余的并不更新
元素唯一标识: 给v-for一个提示, 在for之后,给一个:key代表他的唯一标识
若没有唯一标识,可以在循环时候使用索引(item,index) in items,index是他的索引(很少用)
JS: 老方法的JS只要发生改变,从头渲染到尾,消耗性能
-->
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
newsList:[
{
id:1000,
title:'标题0'
},
{
id:1001,
title:'标题1'
},
{
id:1002,
title:'标题2'
},
{
id:1003,
title:'标题3'
}
]
}
}
}
</script>
维护状态
维护状态: 当Vue更新列表时,默认使用"就地更新"的策略
就地更新: 只更新 元素唯一标识的id发生改变或新增的元素,其余的并不更新
元素唯一标识: 给v-for一个提示, 在for之后,给一个:key代表他的唯一标识
若没有唯一标识,可以在循环时候使用索引(item,index) in items,index是他的索引(很少用)
JS: 老方法的JS只要发生改变,从头渲染到尾,消耗性能