• 首先在页面.js文件中对象的data属性添加变量a

data: {
    a : "2020LPL季后赛观赛指南"
  },
复制代码

• 然后在页面的.wxml文件中使用{{ }} 进行引用即可完成数据绑定

{{a}}
复制代码

• 在页面.js文件中的onLoad钩子函数中使用setData函数，该函数接受一个对象

onLoad: function (options) {
    this.setData({
      b:"2020LPL季后赛观赛指南"
    })
  },
复制代码

• 然后在页面的.wxml文件中使用{{ }} 进行引用即可完成数据绑定

{{b}}
复制代码

setData函数会自动将变量添加至data中

• 最终效果图如下

• 意义：比起传统的DOM操作，数据绑定能够使变量的引用更简单和灵活，使得变量能随意出现在页面的任何位置
• 数据绑定使用Mustache语法，{{}}内部的表达式会被当成js表达式执行，如{{a+b}}

• 首先在页面.js文件的data中定义标志位

data: {
    flag: true
  },
复制代码

• 然后在页面.wxml中输入判断语法

{{date}}
复制代码

当前标志位为true，该组件显示如下：

也可以使用if-else语法

{{date}}
复制代码

列表渲染机制--渲染多组数据

• 首先在页面.js文件中添加数组数据（模拟后台接受得到的数据），存入onLoad钩子函数中,自定义为posts属性的值

  onLoad: function (options) {
    var content = [{
      date: "Nov 20 2020",
      title: "2020LPL夏季赛季后赛观赛指南",
      imgSrc: "/images/lpl.png",
      avatar: "/images/avatar/5.png",
    },
    {
      date: "Sep 18 2020",
      title: "正是虾肥蟹壮时",
      imgSrc: "/images/post/crab.png",
      avatar: "/images/avatar/1.png",
  }]
    this.setData({
      posts: content
    })
    console.log("onLoad")
  },
复制代码

• 然后在页面.wxml中使用block标签，wx:for='{{posts}}'语法进行列表渲染,item.date对变量进行引用

  
    
      
      {{item.date}}
    
    {{item.title}}
    
  

复制代码

• 得到的效果图如下

注：item与index为默认值，可设置为其他任意值。至此完成小程序数据渲染的学习，整理不易，求多点赞支持～