2.3.1 视图与渲染

1. 动态渲染数据 ，该页面page 的data 属性 
  如何动态修改 数据，动态渲染；
  var isShow2 = this.data.isShow  // this 就是表示的当前page 对象，page的属性是data
   this.setData({isShow:!isShow2})  // 通过设置json 数据到data 的属性
  数组的遍历 for；
  if的判断 ，true 才显示
2. 引入外部文件 ，有重复代码时
   通过include 引入header 外部文件 ；
   通过import 引入模板文件，同时需要指明模板的名字

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text:"这是内容",
    isShow:true,   
    data:['aaa','bbb','ccc','ddd']      //数组数据
  },

  onclick : function(){
    console.log('被点击了')
   //  this.setData({isShow:!isShow})   第一个isShow 是data 的，第二个是未知的，所以第二个要赋的值先要定义
   var isShow2 = this.data.isShow
   this.setData({isShow:!isShow2})
  }
})

wxml:

<!--1.引入文件wxml-->
<include src='../templates/header' />

<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary"  bindtap="onclick"> primary </button>

<!-- if判断标签： 为true ，才显示-->
<view wx:if='{{isShow}}'>true is set</view>
<view wx:else>false is set</view>

<!--for 循环标签-->
<view wx:for='{{data}}'>
  {{index}}-{{item}}
</view>


<!--2.引入模板的方式-->
<import src='../templates/footer' />
<template is='footer1'/>

引入模板

 footer.wxml

<template name='footer1'>
这是footer1 
</template>


<template name='footer2'>
这是footer2 
</template>

header.wxml

<!--模板引入-->
<text>这是头文件</text>