全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[松原seo公司到久澳]小程序开发之数据绑定

  

数据绑定

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

 

  关键字(需要在双引号之内)

  true:boolean 类型的 true●◁…□,代表真值。[松原seo公司到久澳]

  false: boolean 类型的 false,代表假值■□。

  

<▼◁;checkbox checked="■□●□;{{false}}"☆◁◁;> </checkbox>

 

  特别注意■▽•:不要直接写 checked="false"△•;,奉化市小程序开发哪家好其计算结果是一个字符串,[SEO优化外包公司哪家好]如何解决微信小程序搭建及解决登录失败的问题。转成 boolean 类型后代表真值。

  运算

  可以在{{}}内进行简单的运算=▽◁,三明市小程序开发哪家好支持的有如下几种方式:

  三元运算

  

<view hidden="{{flag ? true △◁: false}}"> 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"
 }
})

 

  数据路径运算

  

<view>◁▪▼○;{{
object
▲◇•=.
key
}} {{
array
[0]}}<▼◆••;/view>▲★•▪;
Page({ data: {
 object■▷…□: {
 key: '■○●◆;Hello '
 }, array: ['★◇◁;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}

  【相关推荐】

  1. 微信小程序完整源码下载

  2. 微信小程序游戏类demo挑选不同色块

  3. 微信小程序demo-◁□:轮播图变换

  以上就是小程序开发之数据绑定的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[松原seo公司到久澳]小程序开发之数据绑定

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。