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

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

效果

代码 

在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>