Implementation code for data binding and simple logical operations in WeChat applet

The content of this article is about the implementation code of data binding and simple logical operations in WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

1. Simple usage:

Page({
  data: {
    message: '张三'
  }
})

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var content1={
         date: "2020年 10月 8日 ",  
         title："时间群" ,
         nameData:{
              name1:"张三李四",
              name2:"人五人六"，
         },
         fade：true/false 
      }
      this.setData(content);
  },

2. Data binding uses Mustache syntax (double curly brackets) to wrap variables to obtain:

<view> {{ date}} </view>
<view> {{ title}} </view>
<view> {{ nameData.name1}} </view>
<view> {{ nameData.name2}} </view>//层级用点取值
<image wx:if="{{fade}}"  class="image" src=""></image>//隐藏/显示

3. Can be found in {{ }} Perform simple operations in:

三元运算符
<view hidden="{{flag ? true : false}}"> Hidden </view>

4. Calculation:

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

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
输出结果：3 + 3 + d

5. Logical judgment:

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

6. It can also be combined directly in Mustache to form New object or array:

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

Page({
  data: {
    zero: 0
  }
})
输出结果：组合成数组[0, 1, 2, 3, 4]。

7. Object:

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

Page({
  data: {
    a: 1,
    b: 2
  }
})
最终组合成的对象是 {for: 1, bar: 2}

Related recommendations:

jquery form form to obtain content and bind data_javascript skills

Example analysis of two-way binding application of data in AngularJS framework_AngularJS

The above is the detailed content of Implementation code for data binding and simple logical operations in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!