今天系统的记录一下wxml的数据绑定功能。吐舌头
首先给出要用到的wxss样式文件
/* pages/wxml/wxml.wxss */
.wxml-container{
padding: 0 20rpx ;
align-items: center;
}
.topic-group{
background: pink;
width: 100%;
text-align: center;
margin-top: 40rpx;
}
#text1{
margin-top: 0;
}
text{
width: 100%;
text-align: center;
}
.topic-item{
font-size: 40rpx;
}
1.简单绑定,用双花括号引用变量 简单绑定 {{message}} {{messageNew.time}}
并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。
Page({
/**
* 页面的初始数据
*/
data: {
message: "简单绑定的字符串",
messageNew:{
time:"2017-10-17"
},
}
})
效果图↓
2.用工具查看属性,将view的id值赋为item-{{id}}
class="topic-group">组件属性
id="item-{{id}}" class="topic-item">通过工具查看属性
在js对id进行赋值
id: 1,
查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。
3.控制属性
class="topic-group">控制属性
bindtap="switchCondition">切换condition(Click on me)
wx:if="{{condition}}" class="topic-item">condition为true会显示
js中我们首先将condition赋值true,并在js中实现方法
switchCondition: function () {
var condition = this.data.condition;
this.setData({
condition: !condition
})
}
看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓
4.三元运算
class="topic-group">三元运算
hidden="{{flag==1?true:false}}" class="topic-item">flag={{flag}}
①我们在js中将flag赋值为5,显示如下↓(因为flag不为1,因此hidden为false,即不隐藏)
②在js中将flag赋值为1,显示如下↓(flag==1,hidden值为true,view被隐藏)
5.算数运算
class="topic-group">算数运算
class="topic-item">{{a+b}}+{{c}}+d
class="topic-item">{{a+b+c}}+{{d}}
同样在js的data中进行赋值↓
a: 1,
b: 2,
c: 3,
d: 4,
效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算
6.逻辑运算
class="topic-group">逻辑判断
wx:if="{{length>5}}" class="topic-item">length={{length}}
wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}
在js赋值
length:4.5,
arr:[1,2,3,4,5,6],