• 首先在頁面.js文件中對(duì)象的data屬性添加變量a

data: {
    a : "2020LPL季后賽觀賽指南"
  },
復(fù)制代碼

• 然后在頁面的.wxml文件中使用{{ }} 進(jìn)行引用即可完成數(shù)據(jù)綁定

{{a}}
復(fù)制代碼

• 在頁面.js文件中的onLoad鉤子函數(shù)中使用setData函數(shù)，該函數(shù)接受一個(gè)對(duì)象

onLoad: function (options) {
    this.setData({
      b:"2020LPL季后賽觀賽指南"
    })
  },
復(fù)制代碼

• 然后在頁面的.wxml文件中使用{{ }} 進(jìn)行引用即可完成數(shù)據(jù)綁定

{}
復(fù)制代碼

setData函數(shù)會(huì)自動(dòng)將變量添加至data中

• 最終效果圖如下

• 意義：比起傳統(tǒng)的DOM操作，數(shù)據(jù)綁定能夠使變量的引用更簡單和靈活，使得變量能隨意出現(xiàn)在頁面的任何位置
• 數(shù)據(jù)綁定使用Mustache語法，{{}}內(nèi)部的表達(dá)式會(huì)被當(dāng)成js表達(dá)式執(zhí)行，如{{a+b}}

• 首先在頁面.js文件的data中定義標(biāo)志位

data: {
    flag: true
  },
復(fù)制代碼

• 然后在頁面.wxml中輸入判斷語法

{{date}}
復(fù)制代碼

當(dāng)前標(biāo)志位為true，該組件顯示如下：

也可以使用if-else語法

{{date}}
復(fù)制代碼

列表渲染機(jī)制--渲染多組數(shù)據(jù)

• 首先在頁面.js文件中添加數(shù)組數(shù)據(jù)（模擬后臺(tái)接受得到的數(shù)據(jù)），存入onLoad鉤子函數(shù)中,自定義為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: "正是蝦肥蟹壯時(shí)",
      imgSrc: "/images/post/crab.png",
      avatar: "/images/avatar/1.png",
  }]
    this.setData({
      posts: content
    })
    console.log("onLoad")
  },
復(fù)制代碼

• 然后在頁面.wxml中使用block標(biāo)簽，wx:for='{{posts}}'語法進(jìn)行列表渲染,item.date對(duì)變量進(jìn)行引用

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

復(fù)制代碼

• 得到的效果圖如下

注：item與index為默認(rèn)值，可設(shè)置為其他任意值。至此完成小程序數(shù)據(jù)渲染的學(xué)習(xí)，整理不易，求多點(diǎn)贊支持～