【uniapp】使用v-if的方式点击改变v-for列表中的单个样式

最新推荐文章于 2024-09-02 17:55:11 发布

小付学代码

最新推荐文章于 2024-09-02 17:55:11 发布

阅读量1.5k

点赞数 1

分类专栏： uni-app 文章标签： uni-app 前端 vue.js

本文链接：https://blog.csdn.net/ONLYSRY/article/details/126527578

版权

uni-app 专栏收录该内容

62 篇文章 5 订阅

订阅专栏

横向列表排四个盒子，点击时改变当前样式，也就是换了一张图片：

点击第一个 ——> 点击第三个：

控制台：非常简单点击事件时传入index就行了

看代码：循环circleList列表生成一排div，使用v-if与v-else然不同条件进入不同的div中即可

<view class="top_icon">
			<view class="top_icon1"  v-for="(item,index) in circleList" 
        :key="index" @click="sel_circle(index)">

    //点击到这个盒子时就让他展示这个div
	<view v-if="mycircle == index">
		<image class="circle" :src="item.slect_icon" mode="aspectFit"></image>
	</view>
    //为选中就走这个div（slect_icon为选中图标 icon为未选中时  ）
	<view v-else>
	    <image class="circle" :src="item.icon" mode="aspectFit"></image>
	</view>
    //输出一下索引号
	{{index}}
</view>

JS部分：逻辑相当简单

		data() {
			return {
				//选择圆圈变大
				mycircle:0,
				//四个圆圈列表，点击后变大
				circleList: [{
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}],


			}
		},
		methods: {
			// tab切换逻辑也是等同这个
			checkIndex(index) {
				// console.log(index)
				this.navIndex = index;
			},
			
			sel_circle(index){
				console.log("点击为：",index);
				//把拿到的值放入mycircle中，与h5中的index作比较写三元运算符
				this.mycircle = index
			},

这一块的完整代码，复制直接run即可：

<template>
<view class="top_icon">
			<view class="top_icon1"  v-for="(item,index) in circleList" 
        :key="index" @click="sel_circle(index)">

    //点击到这个盒子时就让他展示这个div
	<view v-if="mycircle == index">
		<image class="circle" :src="item.slect_icon" mode="aspectFit"></image>
	</view>
    //为选中就走这个div（slect_icon为选中图标 icon为未选中时  ）
	<view v-else>
	    <image class="circle" :src="item.icon" mode="aspectFit"></image>
	</view>
    //输出一下索引号
	{{index}}
</view>
</template>

<script>

	export default {

		data() {
			return {
				//选择圆圈变大
				mycircle:0,
				//四个圆圈列表，点击后变大
				circleList: [{
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}, {
					icon: '../../static/image/pagesthreeicon2.png',
					slect_icon: '../../static/image/pagesthreeicon.png'
				}],


			}
		},
		methods: {
			// tab切换逻辑也是等同这个
			checkIndex(index) {
				// console.log(index)
				this.navIndex = index;
			},
			
			sel_circle(index){
				console.log("点击为：",index);
				//把拿到的值放入mycircle中，与h5中的index作比较写三元运算符
				this.mycircle = index
			},

}

<style scoped>

.top_icon {
		position: absolute;
		display: flex;
		height: 83rpx;
		width: 450rpx;
		margin-left: 150rpx;
		background-color: red;
	}

	.circle {
		width: 53rpx;
		height: 53rpx;
		margin-top: 15rpx;
		margin-left: 40rpx;
		
	}
</style>