uni-app:实现条件判断展示图片（函数判定+三目运算）

25号底片~

已于 2023-09-14 11:06:12 修改

阅读量1k

点赞数

分类专栏： uni-app 文章标签： uni-app 前端 javascript

于 2023-09-14 11:04:45 首次发布

本文链接：https://blog.csdn.net/weixin_46001736/article/details/132871569

版权

uni-app 专栏收录该内容

88 篇文章 2 订阅

订阅专栏

一、多条件判断（通过函数进行图片展示）

效果

代码

在data中定义图片信息和要传递的数据信息，在src中写入函数并携带要传递的数据，通过传递的数据在函数中进行判断，并返回对应的图片信息

<template>
	<view>
		<image :src="getImagePath(line1)" alt=""></image>
		<image :src="getImagePath(line2)" alt=""></image>
		<image :src="getImagePath(line3)" alt=""></image>
  </view>
</template>
<script>
export default {
	  data() {
		return {
			down: getApp().globalData.icon + 'index/edit.png',
			up: getApp().globalData.icon + 'index/ing.png',
			line: getApp().globalData.icon + 'index/none_bind.png',
			line1:'photo1',
			line2:'photo2',
			line3:'photo3',
		}
	  },
	methods: {
		//图片展示
		getImagePath(rate) {
			console.log(rate)
		      if (rate === "photo1") {
		        return this.line;
		      } else if (rate === "photo2") {
		        return this.down;
		      } else {
		        return this.up;
		      }
		    },
	},
	onLoad(){
		
	},
}
</script>
<style lang="scss">
	image{
		width:50px;
		height:50px;
	}
</style>

二、三目运算判断一个条件

效果

代码

三目运算（表达式？true：false）

下例：当变量info的值为50时执行变量img1，反之执行变量img2;当变量info1的值为-50时执行变量img1，反之执行变量img2。则这里满足info = 50，info1 = -50，则都执行:src="img1"

<template>
  <view>
    <image :src="info ==50 ? img1 : img2" alt=""></image>
	<image :src="info1 == -50 ? img1 : img2" alt=""></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info:50,
	  info1:-50,
	  img1: getApp().globalData.icon + 'index/exit.png',
	  img2: getApp().globalData.icon + 'index/edit.png',
    };
  }
};
</script>
<style>
	image{
		width:50px;
		height:50px;
	}
</style>