微信小程序 (七)数据绑定详细介绍_Javascript教程-查字典教程网
微信小程序 (七)数据绑定详细介绍
微信小程序 (七)数据绑定详细介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示。看不懂的可以先记着,后面真正用到时就会明白...

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

data.wxml

<-内容--> <view>{{message}}</view> <-组件属性---需要在双引号之内--> <view id="item-{{id}}">组件属性</view> <-控制属性---需要在双引号之内--> <view wx:if="{{condition}}">控制属性</view> <-三元运算--> <view hindden="{{flag ">三元运算符</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' }, })

相关文章:

hello WeApp icon组件

Window text组件switch组件

tabBar底部导航 progress组件action-sheet

应用生命周期button组件 modal组件

页面生命周期checkbox组件toast组件

模块化详form组件详 loading 组件

数据绑定input 组件 navigator 组件

View组件 picker组件 audio 组件

scroll-view组件 radio组件video组件

swiper组件 slider组件 Image组件

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类