我是靠谱客的博主 懵懂飞机,这篇文章主要介绍uniapp——三元运算(绑定动态数据)--视图层接入函数1、三目运算2、视图层接入函数,现在分享给大家,希望可以做个参考。

1、三目运算

a、正常的三目运算符

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

复制代码
1
2
3
a=='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、视图层接入函数内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(62)

评论列表共有 0 条评论

立即
投稿
返回
顶部