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>