1、三目运算
a、正常的三目运算符
a=='1’表达式:为真就返回‘2’,为假就返回‘5’
复制代码
1
2
3a=='1' ? '2' : '5' <image :src="isConnect?'btn-use.png':'btn-unuse.png'">
b、在class中使用三目运算符
复制代码
1
2
3<view :class="[a=='1' ? 'blue' : 'green']">三目运算符</view> //注意,需要有.blue{***} 和.green{***},class前面有:
c、在style中使用三目运算符
复制代码
1
2<text :style="{color:false? '#aa55ff':'#2ac355'}">ceshi</text>
2、视图层接入函数
当我们在视图层使用三目运算都不能满足要求的时候,我们就必须要采用接入函数,返回更多的值,比如:当状态是1,返回颜色#111;当状态是2,返回颜色#222;当状态是3,返回颜色#333
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64<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>
最后
以上就是懵懂飞机最近收集整理的关于uniapp——三元运算(绑定动态数据)--视图层接入函数1、三目运算2、视图层接入函数的全部内容,更多相关uniapp——三元运算(绑定动态数据)--视图层接入函数1、三目运算2、视图层接入函数内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复