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

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

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' },
})

微信小程序把玩(七)数据绑定的更多相关文章

  1. 微信小程序把玩(十)swiper组件

    原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...

  2. 微信小程序把玩(五)页面生命周期

    原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS ...

  3. 微信小程序把玩(三十二)Image API

    原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx. ...

  4. 微信小程序把玩(三十三)Record API

    原文:微信小程序把玩(三十三)Record API 其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们 ...

  5. 微信小程序把玩(三十四)Audio API

    原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.wx.p ...

  6. 微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API

    原文:微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API 反正我是没有测通这两个API!!!!不知道用的方式不对还是其他的!! ...

  7. 微信小程序把玩(二十八)image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  8. 微信小程序把玩(二十九)video组件

    原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...

  9. 微信小程序把玩(二十七)audio组件

    原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...

随机推荐

  1. SQL Server2008生成数据库字典

    1.我们在开发过程中可能会遇到这样的一种情况"当我们进行维护其他人的项目时或者项目的二次开发时可能会对原始的数据表进行分析",这里为大家介绍一种方便快捷生成数据库字典的方式. 我们 ...

  2. Linux中export导入环境变量的几种方式

    1.首先类似于windows中的设定系统环境变量的方式为,在/etc/profile中 export PATH=$PATH:....:... 注意间隔符为: 然后复用原来路径是$PATH的方式 2.用 ...

  3. KeePass v1.30

    Changes from 1.29 to 1.30: New Features:Refined application icons (thanks to Victor Andreyenkov).Add ...

  4. KVC设置系统自带属性,不管是不是私有的属性

    KVC   可以设置系统自带属性,不管是不是私有的属性:    1,   2,  

  5. NSNull 和 nil 的判断

    情况1. 等于Null if ([_content isEqual:[NSNull null]] ) { //等于Null } 情况2.  等于nil if (_content==nil || [_c ...

  6. hello.c内核模块编译 -- linux内核

    Linux开发模块,在本机上看调试信息的方法走通了.当前版本号2.6.32-32-generic uname –r 能够查询 这里取module_param()作为样例. 该宏被定义在include/ ...

  7. Vue挂载元素的替换

    Vue根组件已有挂载DOM'#app',在render又引进一个组件,该组件最外层也是用了'#app',为何根组件的DOM'#app'会被替换掉. //main.js import Vue from ...

  8. Android学习--Assets资源文件读取及AssetManager介绍

    APK安装过程        复制APK安装包到data/app目录下,解压并扫描安装包,把dex文件(Dalvik字节码)保存到dalvik-cache目录,并data/data目录下创建对应的应用 ...

  9. Entity Framework知识小总结

    什么是Entity Framework EF是微软主推的数据存取技术,在实际开发中,现在通常使用EF来构建应用程序的数据存取层,它是一个开源的“对象/关系映射(ORM:Object Relationa ...

  10. POJ3280 Cheapest Palindrome 【DP】

    Cheapest Palindrome Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6013   Accepted: 29 ...