程序員開發(fā)實戰(zhàn)系列《四》視圖層WXML綁定數(shù)據(jù)、模板、邏輯
發(fā)布時間：2018-03-30 15:39 所屬欄目：小程序開發(fā)教程
前篇文章介紹了小程序的MVC結(jié)構(gòu)：
page.js 即控制層（C），也叫業(yè)務(wù)邏輯層；
page.js 中的data屬性，即數(shù)據(jù)模型層（M）；
page.wxml 即展現(xiàn)層（V）；
page.wxss 即css，增強展現(xiàn)層效果。
通過業(yè)務(wù)邏輯層（C），修改data屬性（M），從而在展現(xiàn)層（V）中展示。
即MVC設(shè)計模式。
一、數(shù)據(jù)綁定
首先看一下Page頁面的MVC 流程結(jié)構(gòu)圖
如果在 data 中定義了某個變量，比如
- Page({
- data:{
- title: '小程序?qū)崙?zhàn)教程',
- desc: '視圖層—WXML'
- }
- })
在頁面中通過 {{title}}，即可展示效果，如下動圖：
二、數(shù)據(jù)綁定常用語法
2.1，內(nèi)容
- <view> {{ message }} </view>
2.2，組件屬性(需要在雙引號之內(nèi))
和內(nèi)容一樣
- <view id="item-{{id}}"> </view>
2.3，控制屬性
- <view wx:if="{{condition}}"> </view>
2.4，關(guān)鍵字(需要{{ }}內(nèi))
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。
- <checkbox checked="{{false}}"> </checkbox>
注意：不要直接寫 checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成 boolean 類型后代表真值。
2.5，三元運算
- <view hidden="{{flag ? true : false}}"> Hidden </view>
2.6，算數(shù)運算
- <view> {{a + b}} + {{c}} + d </view>
2.7，字符串運算
- <view>{{"hello" + name}}</view>
