#yyds幹貨盤點#【愚公系列】2022年10月 微信小程式-資料綁定

前言

1.小程式頁面結構

• js(邏輯處理檔案)：負責頁面邏輯内容的處理，遵循js語言架構。
• json(配置檔案)：用來設定頁面的視窗内容，遵循JSON文法規範。
• wxml（頁面結構檔案或視圖檔案）：用于頁面可視化元件的組織和描述，文法結構類似于xml，與html格式差别較大。
• wxss(樣式檔案)：相容CSS文法規範。

2.資料綁定的定義

一、資料綁定

1.簡單綁定

//Hello MINA!
<view> {{ message }} </view>
//item-0
<view id="item-{{id}}"> </view>
//false
<view wx:if="{{condition}}"> </view>
//關鍵字(需要在雙引号之内)不要直接寫 checked="false"
<checkbox checked="{{false}}"> </checkbox>
//false
<view hidden="{{flag ? true : false}}"> Hidden </view>
//true
<view wx:if="{{length > 5}}"> </view>
//Hello  MINA
<view>{{object.key}} {{array[0]}}</view>
//[0, 1, 2, 3, 4]
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
//{foo: 'my-foo', bar:'my-bar'}
<template is="objectCombine" data="{{foo, bar}}"></template>
           

Page({
  data: {
    message: 'Hello MINA!'，
    id: 0，
    condition: true，
    flag :null,
    length : 6,
    object: {
      key: 'Hello '
    },
    array: ['MINA'],
    zero: 0,
    foo: 'my-foo',
    bar: 'my-bar'
  }
})
           

總結

• 資料的簡單綁定
• 元件屬性綁定
• 運算綁定
• 控制屬性的綁定
• 清單渲染綁定