uniapp——三元运算（绑定动态数据）--视图层接入函数1、三目运算2、视图层接入函数

56 阅读 0 评论 37 点赞

我是靠谱客的博主懵懂飞机，最近开发中收集的这篇文章主要介绍uniapp——三元运算（绑定动态数据）--视图层接入函数1、三目运算2、视图层接入函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、三目运算

a、正常的三目运算符

a=='1’表达式：为真就返回‘2’，为假就返回‘5’

a=='1' ? '2' : '5'
<image :src="isConnect?'btn-use.png':'btn-unuse.png'">

b、在class中使用三目运算符

<view :class="[a=='1' ? 'blue' : 'green']">三目运算符</view>
//注意，需要有.blue{***} 和.green{***},class前面有:

c、在style中使用三目运算符

<text :style="{color:false? '#aa55ff':'#2ac355'}">ceshi</text>

2、视图层接入函数

当我们在视图层使用三目运算都不能满足要求的时候，我们就必须要采用接入函数，返回更多的值，比如：当状态是1，返回颜色#111；当状态是2，返回颜色#222；当状态是3，返回颜色#333

<template>
 <view class="content" >
  <!-- title 为当前页面 data 中定义的初始数据 -->
  <text :style="{color:false? '#aa55ff':'#2ac355'}">{{func.mysplit(3)}}</text>
  <!-- style使用自定义的函数 -->
  <text :style="{color: func.mysplit(3)}">{{func.mysplit(3)}}</text>
  
 </view>
</template>

<!-- :class="[false ? 'backgrounp-blue' : 'backgrounp-green']" -->
<script>
 export default {
  data() {
   return {
    
   }
  },
  onLoad() {
  },
  methods: {
  }
 }
</script>

<style>
 page {
  width: 100%;
  height: 100%;
 }
 .content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
 }
 .backgrounp-blue{
	 background-color: #0066CC;
 }
 .backgrounp-green{
 	 background-color: #00ff7f;
 }
</style>



<script module="func" lang="wxs">
 module.exports = {
  mysplit: function(status) {
	if(status==1){
		return "#111"
	}else if(status==2){
		return "#222"
	}else{
		return "#ff00ff"
	}
   
  },
 }
</script>