W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
SWAN 模板中的動態(tài)數(shù)據(jù),都從邏輯層 Page 中 data 對象來。
數(shù)據(jù)綁定和許多模板引擎一樣,數(shù)據(jù)包裹在雙大括號里面。雙向綁定的數(shù)據(jù)需包裹在{= =}中。
例如:組件 scroll-view 中,scroll-top 和 scroll-left 的使用方法分別為:
代碼示例
<!-- data-demo.swan -->
<view>
Hello My {{ name }}
</view>
<!-- 被渲染成: Hello My SWAN App -->
// data-demo.js
Page({
data: {
name: 'SWAN App'
}
});
代碼示例
<!-- attr-demo.swan -->
<view class="c-{{className}}">屬性綁定</view>
// attr-demo.js
Page({
data: {
className: 'blue'
}
});
注: 屬性不需要被雙大括號包裹
代碼示例
<!-- condition-demo.swan -->
<view s-if="flag">如果為flag為true,你看得到我。</view>
// condition-demo.js
Page({
data: {
flag: true
}
});
SWAN 模板 提供了豐富的表達(dá)式類型支持,讓使用者在編寫視圖模板時更方便。
通過下面例子列舉支持的表達(dá)式類型。
<!-- operation-demo.swan -->
<!-- 普通變量 -->
<text>{{name}}</text>
<!-- 屬性訪問 -->
<text>{{person.name}}</text>
<text>{{persons[1]}}</text>
<!-- 一元否定 -->
<text>{{!isOK}}</text>
<text>{{!!isOK}}</text>
<!-- 二元運算 -->
<text>{{num1 + num2}}</text>
<text>{{num1 - num2}}</text>
<text>{{num1 * num2}}</text>
<text>{{num1 / num2}}</text>
<text>{{num1 + num2 * num3}}</text>
<!-- 二元關(guān)系 -->
<text>{{num1 > num2}}</text>
<text>{{num1 !== num2}}</text>
<!-- 三元條件 -->
<text>{{num1 > num2 ? num1 : num2}}</text>
<!-- 括號 -->
<text>{{a * (b + c)}}</text>
<!-- 數(shù)值 -->
<text>{{num1 + 200}}</text>
<!-- 字符串 + 三元條件 -->
<text>{{item ? ',' + item : ''}}</text>
<!-- 三元運算 -->
<checkbox checked="{{flag ? true : false}}"></checkbox>
<!-- 數(shù)組字面量 -->
<text>{{ ['john', 'tony', 'lbj'] }}</text>
注: 對象字面量支持了在模板里重組對象以及使用擴展運算符 ... 來展開對象。
代碼示例
<!-- template-demo.swan-->
<template name="tag-card">
<view>
<text>標(biāo)簽: {{tag}}</text>
<text>昵稱: {{nickname}}</text>
</view>
</template>
<template name="person-card">
<view>
<text>位置: {{pos}}</text>
<text>姓名: {{name}}</text>
</view>
</template>
<template name="team-card">
<view s-for="item, index in teams">
<text>球隊: {{index}} - {{item}}</text>
</view>
</template>
<template name="age-card">
<view>
<text>年齡: {{age}}</text>
</view>
</template>
<template is="person-card" data="{{person}}" />
<!-- 對象字面量 -->
<template is="team-card" data="{{ {teams} }}" />
<template is="tag-card" data="{{ {tag, nickname: 'king'} }}" />
<template is="age-card" data="{{ {...person} }}" />
// template-demo.js
Page({
data: {
person: {name: 'Lebron James', pos: 'SF', age: 33},
teams: ['Cleveland Cavaliers', 'Miami Heat', 'Los Angeles Lakers'],
tag: 'basketball'
}
});
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: