文档章节

微信小程序把玩(七)数据绑定

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 441
阅读 1
收藏 0

这里写图片描述

数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示。看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的。这里先记录下

data.wxml

<!--数据绑定使用对象---内容--> <view>{{message}}</view> <!--数据绑定使用对象---组件属性---需要在双引号之内--> <view id="item-{{id}}">组件属性</view> <!--数据绑定使用对象---控制属性---需要在双引号之内--> <view wx:if="{{condition}}">控制属性</view> <!--数据绑定使用对象---三元运算--> <view hindden="{{flag ? true : false}}">三元运算符</view> <!--数据绑定使用对象---算数运算--> <view>我是运算结果---{{a + b}} + {{c}} + d</view> <!--数据绑定使用对象---逻辑判断--> <view wx:if="{{length > 5}}">asdf</view> <!--数据绑定使用对象---字符串运算--> <view>{{"Hello " + name}}</view> <!--数据绑定使用对象---数组组合--> <view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view> <!--数据绑定使用对象---对象--> <template is="objectCombine" data="{{for: x, bar: y}}"></template> <!--数据绑定使用对象---扩展运算符对象 ... 将一个对象展开--> <template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template> <!--数据绑定使用对象---对象的key和value相同时--> <template is="objectCombine" data="{{foo, bar}}"></template>

data.js

Page({
  data:{

    //内容绑定
    message: 'Hello WeApp',

    //组件属性绑定
    id: 0,

    //控制属性绑定
    condition: true,

    //三元运算
    flag:false,

    //算数运算
    a: 1,
    b: 2,
    c: 3,

    //逻辑判断
    length: 6,

    //字符串运算
    name: '顺子',

    //数组组合
    zero: 0,

    //对象

    x: 0,
    y: 1,

    //对象展开
    obj1: {
        a: 1,
        b: 2
    },
    obj2: {
        c: 3,
        d: 4
    },
    p: 5,

    //对象key和value形同时
    foo: 'my-foo',
    bar: 'my-bar'



  },
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52652011

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.7K
11
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
2018/06/27
0
0
小程序开发框架 - Mpx

Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx ,我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特性...

匿名
2018/12/11
0
3
小程序基础知识点讲解-WXML + WXSS + JS,生命周期

小程序基础 小程序官方地址,小程序开发者工具,点击此处下载。在微信小程序中有一个配置文件,此文件可以让开发者在不同设备中进行开发。 微信小程序共支持5种文件,,,,,以及等。每一页...

达叔小生
2018/08/08
0
0
微信小程序版OpenSNS,抢先体验,名额递减中

自2016年1月11日微信之父张小龙提出微信“应用号”概念,到2016年9月21日,微信“应用号”以微信“小程序”的名字正式开启内测,微信小程序一直受到了广泛的关注。 扫一扫或者搜一下即可打开...

想天软件奕潇
2016/11/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部