用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序wxml数据绑定总结

Rolan 2017-10-18 00:43

今天系统的记录一下wxml的数据绑定功能。首先给出要用到的wxss样式文件view plaincopyprint?/*pages/wxml/wxml.wxss*/.wxml-container{padding:020rpx;align-items:center;}.topic-group{background:pink;width:100% ...

今天系统的记录一下wxml的数据绑定功能。吐舌头 
首先给出要用到的wxss样式文件

  1. /* pages/wxml/wxml.wxss */
  2. .wxml-container{
  3. padding: 0 20rpx ;
  4. align-items: center;
  5. }
  6. .topic-group{
  7. background: pink;
  8. width: 100%;
  9. text-align: center;
  10. margin-top: 40rpx;
  11. }
  12. #text1{
  13. margin-top: 0;
  14. }
  15. text{
  16. width: 100%;
  17. text-align: center;
  18. }
  19. .topic-item{
  20. font-size: 40rpx;
  21. }

1.简单绑定,用双花括号引用变量 

简单绑定 
{{message}} 
{{messageNew.time}} 

并在js的data中赋值↓,如message中可以直接引用,time在messageNew中赋值,引用时用.间隔,messageNew.time为数据路径。

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. message: "简单绑定的字符串",
  7. messageNew:{
  8. time:"2017-10-17"
  9. },
  10. }
  11. })

效果图↓

2.用工具查看属性,将view的id值赋为item-{{id}}

  1. class="topic-group">组件属性
  2. id="item-{{id}}" class="topic-item">通过工具查看属性

在js对id进行赋值

  1. id: 1,

查看属性↓,点击Wxml工具,将鼠标移到左侧view上并点击,对应属性内容标蓝,可以看到,该view的id值为item-1。

3.控制属性

  1. class="topic-group">控制属性
  2. bindtap="switchCondition">切换condition(Click on me)
  3. wx:if="{{condition}}" class="topic-item">condition为true会显示

js中我们首先将condition赋值true,并在js中实现方法

  1. switchCondition: function () {
  2. var condition = this.data.condition;
  3. this.setData({
  4. condition: !condition
  5. })
  6. }

看下效果图,每次点击“切换condition”条目,condition值都取反,影响view的展示↓

4.三元运算

  1. class="topic-group">三元运算
  2. 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.算数运算

  1. class="topic-group">算数运算
  2. class="topic-item">{{a+b}}+{{c}}+d
  3. class="topic-item">{{a+b+c}}+{{d}}

同样在js的data中进行赋值↓

  1. a: 1,
  2. b: 2,
  3. c: 3,
  4. d: 4,

效果图如下,花括号包裹的部分可以进行运算,不同花括号之间的数据无法进行运算

6.逻辑运算

  1. class="topic-group">逻辑判断
  2. wx:if="{{length>5}}" class="topic-item">length={{length}}
  3. wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}

在js赋值

  1. length:4.5,
  2. arr:[1,2,3,4,5,6],

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Crab0314 来自: csdn

相关阅读