015 ∞ WXML：数据绑定 |【运算】

不二如是

                               
登录/注册后可看大图

上一讲搞定了最简单的数据绑定，这次来学习绑定运算。

除了绑定基本数据，还可以在 {{}} 内进行简单的运算，支持的有如下几种方式。

三元运算：

1. <view hidden="{{flag ? true : false}}"> Hidden </view>

复制代码

flag条件为真，执行true，输出Hidden；反之，什么也没有输出。

算数运算：

1. <view>{{a+b}}+{{c}}+{{c+d}}+d</view>

复制代码

1. Page({
   
2.   data: {
   
3.     a: 1,
   
4.     b: 2,
   
5.     c: 3
   
6.   }
   
7. })

复制代码

view中的内容为:

未定义的直接输出，若是和其他元素发生运算关系，会输出NaN（num+string=NaN）。

逻辑判断：

1. <view wx:if="{{length > 5}}"> </view>

复制代码

字符串运算：

1. <view>{{"Love" + name}}</view>

复制代码

1. Page({
   
2.   data:{
   
3.     name: 'FishC'
   
4.   }
   
5. })

复制代码

数据路径运算：

1. <view>{{object.key}} {{array[0]}}</view>

复制代码

1. Page({
   
2.   data: {
   
3.     object: {
   
4.       key: 'Love '
   
5.     },
   
6.     array: ['FishC','鱼C']
   
7.   }
   
8. })

复制代码

---

课后作业


1、填写空格，完善下列的三元运算符：

1. <view hidden="{{flag ？ true ？ false}}"> Hidden </view>

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

一笙彤

0

ShmilyLee

?  :

又新

？ ：