微信小程序渲染

在这里插入代码片## 微信小程序渲染
1.列表渲染

wx:for{{index}} {{item}}
wx:key{{index}}
注意：最新的微信小程序开发工具升级以后，变为下方的表示方法
wx：key=“index”

.xml文件
<view>{{msg}}</view>
<image src="{{img}}"></image>
<view wx:for="{{arr}}" wx:key="index">
  {{index}}  {{item}}
</view>
<view wx:for="{{list}}" wx:key="index">
  {{item.name}}{{item.age}}
</view>

.js文件
.Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: 'hello world',
    img: '/images/cat.jpg',
    arr: ['a','b','c'],
    list: [
     {  name:'lz',
        age:18
    },{ name:'lucy',
        age:19
      } ]
        },

2.条件渲染

使用wx:if= “{{condition}}” 来判断是否需要条件渲染改代码，也可以使用wx.elif 和wx.else 来添加一个else块
wx:if 和hidden
1.如果需要频繁切换的情景下，我们使用hidden更好
2.如果在运行中条件不太可能改变，则我们使用wx:if 会更好

<view wx:for="{{list}}" wx:key="index">
  {{item.name}}{{item.age}}
</view>
<view wx:if="{{ islogin}}"> lucy</view>
<view wx:else>请登录</view>
<view hidden='{{!islogin}}'>lz</view>