（二）04-WXML模板语法详解-模板template用法 和数据传递

模板template用法 和数据传递

应用场景：重复性的内容可以抽取到模板中

• 定义模板：数据是使用模板的时候传递过来的，而不是直接从js文件中传递过来的
  • 需要提供name属性

<template name='fruitList'>
  <view>水果列表</view>
  <view wx:key='{{item.id}}' wx:for='{{fruits}}'>
    {{index}}----{{item.ename}}---{{item.cname}}
  </view>
</template>

写法一：

• 使用模板：这里的data数据来自于页面js文件中data数据
  • 需要通过is属性去关联定义模板时的name属性值

<template is='fruitList' data='{{...info}}'></template>

写法二：

写法三：

给对象起别名：，同写法三

// 案例
<!-- 模板用法：抽取通用的一块模板结构，动态填充数据，生成多份内容 -->
<!-- 定义模板 -->
<template name='fruit'>
  <view>
    <view wx:for-index='num' wx:for-item='name' wx:key='{{index}}' wx:for='{{listData}}'>
      {{num}} {{name.ename + '--' + name.cname}}
    </view>
    <view>{{hello}}</view>
    <view>{{msg}}</view>
  </view>
</template>
<!-- 使用模板 -->
<template is='fruit' data='{{listData}}'></template>
<template is='fruit' data='{{listData}}'></template>
<template is='fruit' data='{{listData:listData1}}'></template>
<template is='fruit' data='{{...info}}'></template>
<template is='fruit' data='{{hello:info.hello,msg:info.msg}}'></template>

    // 数据
    listData1: [{
      ename: 'apple',
      cname: '苹果1'
    }, {
      ename: 'orange',
      cname: '橘子1'
    }],
    info: {
      hello: 'nihao',
      msg: 'hi'
    }