27.Vue3:列表渲染
2023-09-27 14:23:04 时间
<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只要发生改变,从头渲染到尾,消耗性能
相关文章
- Vue Demij打通vue2与vue3壁垒,构建通用组件
- 【Vue3】shallowReactive与shallowRef用法
- 基于vue3的移动端音乐播放器
- Vue3.x使用Element Plus组件登录过期多次弹窗问题
- vue2.x与vue3.x中自定义指令详解
- Vue3新特性体验--下(各式各样API,完结篇)
- vue3中data|methods与script setup区别
- vue3语法模板template
- vue3之vue2到vue3到底变化了什么
- Vue3之Fragment
- Vue3之readonly与shallowReadonly
- vue3响应式reactive的实现原理;proxy深层代理;vue3响应式api
- 5.0 vue3 watch监听函数 (ref篇)