微信小程序数据绑定与运算全面详解及实例展示

why 119 2024-10-08 09:20:50

本文主要和大家介绍微信小程序 数据绑定的简单实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下，希望能帮助到大家。

微信小程序 数据绑定的简单实例

简单用法：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

Page({

 data: {

  message: '张三'

 }

})

 

 /**

  * 生命周期函数--监听页面加载

  */

 onLoad: function (options) {

   var content1={

     date: "2020年 10月 8日 ",

     title："时间群" ,

     nameData:{

       name1:"张三李四",

       name2:"人五人六"，

     },

     fade：true/false

   }

   this.setData(content);

 },

数据绑定使用 Mustache 语法（双大括号）将变量包起来获取


1

2

3

4

5

<view> {{ date}} </view>

<view> {{ title}} </view>

<view> {{ nameData.name1}} </view>

<view> {{ nameData.name2}} </view>//层级用点取值

<image wx:if="{{fade}}" class="image" src=""></image>//隐藏/显示

可以在 {{}} 内进行简单的运算

三元运算符


1

<view hidden="{{flag ? true : false}}"> Hidden </view>

计算


1

2

3

4

5

6

7

Page({

 data: {

  a: 1,

  b: 2,

  c: 3

 }

})


1

2

3

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

 

输出结果：3 + 3 + d。

逻辑判断


1

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

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


1

2

3

4

5

Page({

 data: {

  zero: 0

 }

})


1

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

输出结果：组合成数组[0, 1, 2, 3, 4]。

对象


1

2

3

4

5

6

Page({

 data: {

  a: 1,

  b: 2

 }

})


1

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

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


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 数据 微信小程序 实例 小程序
上一篇:Angularjs 过滤器实现排序功能实例详细解析与展示
下一篇:微信小程序页面跳转事件绑定实例全面深入详解
相关文章