DDR爱好者之家

微信小程序 教程之数据绑定
站长资源 2024/11/28 佚名
69 1538
DDR爱好者之家 Design By 杰米

系列文章：

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

数据绑定

WXML中的动态数据均来自对应Page的data。

简单绑定

数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>

Page({
 data: {
 message: 'Hello MINA!'
 }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
 data: {
 id: 0
 }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
 data: {
 condition: true
 }
})

运算

可以在{{}}内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag "> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
 data: {
 a: 1,
 b: 2,
 c: 3
 }
})

view中的内容为3 + 3 + d

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>

Page({
 data:{
 name:"MINA"
 }
})

组合

也可以在Mustache内直接进行组合，构成新的对象或者数组

数组

<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
 data: {
 zero: 0
 }
})

最终组合成数组[0, 1, 2, 3, 4]

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
 data: {
 a: 1,
 b: 2
 }
})

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
 data: {
 obj1: {
  a: 1,
  b: 2
 },
 obj2: {
  c: 3,
  d: 4
 }
 }
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同，也可以间接地表达

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
 data: {
 foo: 'my-foo',
 bar: 'my-bar'
 }
})

最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>

Page({
 data: {
 obj1: {
  a: 1,
  b: 2
 },
 obj2: {
  b: 3,
  c: 4
 },
 a: 5
 }
})

最终组合成的对象是{a: 5, b: 3, c: 6}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米