item | desc |
---|---|
<view> | 视图;块标签;类似 <div> |
<text> | 文本;行标签;只能嵌套文本标签;类似 <span> |
<navigator> | 导航;类似 <a> |
<image> | 图像;默认300px*240px;类似 <img> |
<video> | 视频;默认300px*225px |
<audio> | 音频;系统不建议使用 |
<view> {{msg}} </view>
<view> {{age + 2}} </view> <view> {{age>=18 ? 'Welcome' : 'Bye'}} </view>
<image src="{{src}}" mode=""/>
<view class="{{isActive?'bold':''}}">动态类的三元表达式</view>
<view class="title {{isActive?'bold':'normal'}}">静态类和动态类的组合形式</view>
<text style="color: {{color}};">内联样式</text>
<view class="box" style="background-image: url({{src}});">类和内联样式可以共同使用</view>
<view class="{{'bold':isActive}}">错误!简洁起见,小程序不支持对象形式</view>
<text style="backgroundColor: {{color}};">居然不支持驼峰语法</text>
data: { age: 18, isShow: true }
<view wx:if = '{{ age >= 18 }}'> Welcome </view>
<view hidden="{{age >= 18}}">88</view> <view hidden="{{isShow}}">88</view>
<view wx:if = '{{ age >= 18 }}'> Welcome </view> <view wx:else> Bye </view>
使用数据项的 id - 每个数据项需要携带 id 字段属性;推荐
使用数据项的序号 index
使用数据项 item
为数据创建时间戳 - now()
obj:[ {id:0, name:'gl', year:1995}, {id:1, name:'sh', year:2005}, {id:2, name:'nj', year:2008} ], arr: [1, 2, 3, 4, 5]
<view wx:for="{{9}}" wx:key="index"> {{item}} </view>
<view wx:for="{{obj}}" wx:key="item"> {{item.name}}- {{item.year}} </view>
<view wx:for="{{arr}}" wx:key="id"> {{item}} </view>
<view class="item" wx:for="{{arr}}" wx:key="index" wx:for-item='i'> <text wx:for="{{i+1}}" wx:key="index" wx:for-item='j'> <text class="item" wx:if="{{j>0}}">{{j}} * {{i}} = {{i*j}} </text> </text> </view>
obj:{id:100,name:'glpla',gender:'male'}
<block wx:for="{{obj}}" wx:key="index"> <view>{{index}}</view> <view>{{item}}</view> </block>