900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 三元运算 微信小程序_微信小程序 三元运算符 条件语句if和循环语句for(三目运算+h

三元运算 微信小程序_微信小程序 三元运算符 条件语句if和循环语句for(三目运算+h

时间:2023-06-21 08:35:47

相关推荐

三元运算 微信小程序_微信小程序 三元运算符 条件语句if和循环语句for(三目运算+h

在微信小程序的官方文档中,将这两个语句归化在框架的视图层,分表叫条件渲染和类表渲染,其实他就是封装了这两条语句而已。

上图(循环语句if)

1.它是通过在index.js中设置数据,然后再index.wxml中进行判断,首先上index.wxml的代码。

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

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//微信是封装过if语句的,你只要在index.js中设置好值,然后就可以直接想这样拿来判断了,还有这是class=“view”效果放在判断语句中是没有效果的 truefalse //三目运算,你可以比较一下这俩,上边判断true和false的方法,自己认为哪个简单用哪个 aabb--------------------------- //其实挺简单的这样,相对于java和C++来说,这里直接写判断的数据就OK了 你很棒还算是个中国人只能去日本了--------------------------- //如果你一个判断条件下有好几个view就用block标签,他算是个万能标签,什么属性都可以往里写,所以遇到复杂的视图时记得用它。 你很叼你很菜

2.index.js的代码,

1

2

3

4

5

6

7

1

2

3

4

5

6

7var param={

data:{ you:true, diao:18, }

}

Page(param);

3.index.wxss的代码

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8.view{ width:100px; height:50px; background-color:green; color:white; padding:20px; margin-top:10px}

注意:if和hidden的区别

二、循环语句for(其实在第8讲的button按钮中是有展示过的)

循环语句for呢,就是在index.js中把循环的数组,就是所有数据写进去,然后再index.wxml中进行逐一展示就行了。这里结合一下icon标签的属性

1.index.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14//因为要展示很多个icon,所以这里需要用到block标签。把index.js中写好的数组名字写在for的双括号中,然后在数组对应的属性下写进去item就ok了 ------------------------------------

2.index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

1

2

3

4

5

6

7

8

9

10

11

12

13var param={

data:{

iconSize:[20,30,40,50,60,70],

iconColor:[ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],

iconType: [

'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',

'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',

'info_circle', 'cancel', 'search', 'clear'

]

}

}

Page(param)

如果是嵌套循环怎么办? 上代码

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8//重点在于给两个循环语句命名,然后去分别使用这两个语句

上效果图

摘要: 比wx:if作条件判断更优雅的写法

以地址列表中,默认地址是否选择为例。

先来看下wx:if的写法

默认地址

从上面的代码可以看出,标签要重复写2次,包括class样式等属性,设定某个地址为默认地址时将会有绑定事件bindtap等,还会有有data-index等自定义属性,如果是swiper、scroll-view等组件还少不了写上current、scroll-y附加属性就更加抓狂了;要是标签里还包含其他标签块,那就成几何倍增加冗余代码了,就不可想象了。到时候用wx:if写预计会长成这样:

再来对比看下三元运算符的写法:

默认地址

与wx:if标签写法相比,显然更加简洁优雅。

由于小程序不能操作dom,三元运算符还有一个常用的使用场景是控件class样式输出,达到jQuery.addClass()的效果。例如:

{{provinceName}}

以上书写形式参考了angular.js写法,在小程序中类比实现了。注意success_circle值要包裹在引号之中。小程序实际支持了三元运算符写法,只是文档上没有明说,比较遗憾。

三元运算 微信小程序_微信小程序 三元运算符 条件语句if和循环语句for(三目运算+hidden)...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。