v-for的用法及案例

欢迎来到我的UniApp技术专栏!🎉 在这里,我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。

专栏特色:

📱 跨平台开发一站式解决方案

🚀 从入门到精通的完整学习路径

💡 实战项目经验分享

🔍 常见问题深度解析

无论你是刚接触UniApp的新手,还是有一定经验的开发者,都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧,帮助大家提升开发效率,打造高质量的跨平台应用。

如果文章对你有帮助,别忘了点赞收藏🌟,也欢迎在评论区留言交流,我会及时回复大家的问题!

让我们一起探索UniApp的无限可能!

目录

一.v-for的用法

1.举例1

2.举例2

二.购物车案例

1.代码

2.存在的问题:复选框错位

[3.解决方案: 赋值给key属性一个唯一的值](#3.解决方案: 赋值给key属性一个唯一的值)


一.v-for的用法

1.举例1

html 复制代码
<template>
	<view>
		<view v-for="(item,index) in 10" :key="index">box模块-{{ index+1 }}</view>
	</view>
</template>
 
<script setup>


</script>
 
<style lang="scss" scoped>
</style>

:key是生成的每一个view的唯一标志。

运行效果:

2.举例2

html 复制代码
<template>
	<view>
		<view v-for="item in nba" :key="item.id">
			球星:{{item.name}} - 球衣:{{item.num}}
		</view>
	</view>
</template>
 
<script setup>
import {ref} from 'vue';
const nba = ref([
	{id:1, name:"乔丹",num:23},
	{id:2, name:"詹姆斯",num:6},
	{id:3, name:"科比",num:24},
])

</script>
 
<style lang="scss" scoped>
</style>

运行效果:

二.购物车案例

1.代码

html 复制代码
<template>
	<view class="out">
		<view class="item" v-for="(item,index) in goods">
			<checkbox></checkbox>
			<text class="title">{{item.name}}</text>
			<text class="del" @click="remove(index)">删除</text>
		</view>
	</view>
</template>
 
<script setup>
import {ref} from 'vue';
//定义商品对象数组
const goods = ref([
	{id:11, name:"小米"},
	{id:22, name:"华为"},
	{id:33, name:"oppo"},
	{id:44, name:"苹果"},
])
//点击【删除】按钮,触发的事件
const remove = (index)=>{
	goods.value.splice(index, 1);//删除下标为index的元素
}
</script>
 
<style lang="scss" scoped>
.out{
	padding:10px;
	.item{
		padding:10px 0;
		.del{
			color:red;
			margin-left: 30px;
		}
	}
}
</style>

运行效果:

2.存在的问题:复选框错位

当我们选中某一个商品的复选框后,如果自己/上面的商品被删除了,复选框会发生错位,如下图所示:

3.解决方案: 赋值给key属性一个唯一的值

此时是vue底层算法问题,要想解决该问题,就得给使用v-for渲染的每一个项的key属性赋一个唯一的值,如下:

运行效果:

以上就是本篇文章的全部内容,喜欢的话可以留个免费的关注呦~

相关推荐
叫我阿柒啊20 小时前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊1 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊2 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
—Qeyser2 天前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
叫我阿柒啊2 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊2 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊3 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare4 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊4 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack