程序員開發(fā)實(shí)戰(zhàn)系列《四》視圖層WXML綁定數(shù)據(jù)、模板、邏輯
發(fā)布時(shí)間：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，增強(qiáng)展現(xiàn)層效果。
通過業(yè)務(wù)邏輯層（C），修改data屬性（M），從而在展現(xiàn)層（V）中展示。
即MVC設(shè)計(jì)模式。
一、數(shù)據(jù)綁定
首先看一下Page頁面的MVC 流程結(jié)構(gòu)圖
如果在 data 中定義了某個(gè)變量，比如
- Page({
- data:{
- title: '小程序?qū)崙?zhàn)教程',
- desc: '視圖層—WXML'
- }
- })
在頁面中通過 {{title}}，即可展示效果，如下動(dòng)圖：
二、數(shù)據(jù)綁定常用語法
2.1，內(nèi)容
- <view> {{ message }} </view>
2.2，組件屬性(需要在雙引號(hào)之內(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"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。
2.5，三元運(yùn)算
- <view hidden="{{flag ? true : false}}"> Hidden </view>
2.6，算數(shù)運(yùn)算
- <view> {{a + b}} + {{c}} + d </view>
2.7，字符串運(yùn)算
- <view>{{"hello" + name}}</view>
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.u-renovate.com/wxmini/doc/course/22973.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
