微信小程序-WXML-template模板

微信小程序-WXML-template模板

微信小程序中的模板,可以在其中定义代码片段,然后再不同的地方调用。

1.定义模板

name属性,取值为模板的名字

<tempalte name="msgItem">
	<view>
		<text>{{index}}:{{msg}}</text>
	</view>
</tamplate>

2.使用模板

模板定义后,默认是不显示的,必须使用is属性,声明需要使用的模板,将模板的data传入

<template name="msgItem">
	<text> {{index}}: {{msg}} </text>
</template>
<!--上下name属性值要一致,data表示传入数据-->
<template is="msgItem" data="{{...item}}">
		
</template>

js:使用 is 属性,声明需要的使用的模板,将模板所需要的 data 传入

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

显示内容: 0: this is a template

案例2:

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

显示内容

odd

even

odd

even

odd
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值