pp电子

登录
免费开通

微信小程序数据绑定,小程序动态数据绑定

数据绑定

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,,,代表真值。。。。。。

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

<checkbox checked="{{false}}"> </checkbox>

特殊注重:不要直接写 checked="false",,,其盘算效果是一个字符串,,,转成 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}。。。。。。

注重: 花括号和引号之间若是有空格,,,将最终被剖析成为字符串

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

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

更多微信小程序开发教程,,,可以关注。。。。。。
【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,若有知识产权人并不肯意我们使用,,,若是有侵权请连忙联系。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,仅系客观性形貌,,,如您需要相识该类商品/服务详细的资讯,,,请您直接与该类商品/服务的提供者联系。。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。

KESION 一直通过手艺立异,,,提供产品和服务,,,助力企业向数字化转型,,,通过科技驱动商业刷新,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



上/下篇
  • 小程序用什么语言开发,WXML具有什么能力

  • 微信小程序表单组件picker-view,picker-view嵌入页面的转动选择器

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序数据绑定,小程序动态数据绑定 - KESION p