Vue3中v-for状态维护
2023-06-13 09:12:14 时间
tips:
- v-for循环出来的元素尽量有key属性
- 在Vue3中,key属性尽量放入数据的唯一标识id
- key属性如果没有唯一标识id,也可以放入index值
- 在Vue3中,key属性只允许放入Number或String数据类型
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3"></script>
<title>Document</title>
</head>
<body>
<div id="michael">
<div v-for="(abc , index) in arr" :key="abc.id"> <!--也可以写成:key="index"-->
{{abc.value}}{{index}}
</div>
</div>
<script>
Vue.createApp({
data(){
return {
arr:[{
"value":"lio",
"id":0
},
{
"value":"scott",
"id":1
},
{
"value":"lancy",
"id":2
}]
}
}
}).mount("#michael")
</script>
</body>
</html>
相关文章
- Vue3—父子组件传值(子组件使用 emit 传值到父组件)
- Vue3,用组合编写更好的代码:Async Without Await 模式(4/4)
- vue3 axios跨域_vueaxios跨域请求
- 为什么vue3要选用proxy,好处是什么?
- Vue3基础
- Vue3组件库打包指南,一次生成esm、esm-bundle、commonjs、umd四种格式
- vue3 day03
- 从0到1 Webpack搭建Vue3开发、生产环境
- VUE3+TS学习-项目搭建
- 软件测试|测试平台vue3 模版语法
- vue3 函数式组件调试报警 Non-function value encountered for default slot
- vue3如何获取绑定在组件上的 textarea DOM元素
- 尤雨溪: Vue3 将不会支持 IE11!VSCode 1.55 稳定版发布,更新了 9 个亮点!
- golang + vue3+vite 构建后台管理系统笔记。
- vue2升级vue3:vue-i18n国际化异步按需加载
- Vue3+vite项目中如何动态导入并创建多个全局组件