weex逻辑控制

在WEEX中，有if 和 repeat 两种逻辑运算，需要注意的是，逻辑控制不能够作用于<template>这样的根节点。

 

if 控制判断条件true/false直接对节点进行操作，if="true"，添加一个节点， if="false"，移除一个节点 ,使用if 的时候可以不用用花括号括起来。

 

repeat 就是对数组进行渲染，我们对数组进行repeat，在它的子元素上，绑定数组中的一个对象的key，就可以获取到相应的value了。

<template>
  <container>
    <container repeat="{{list}}" class="{{gender}}">
      <image src="{{avatar}}"></image>
      <text>{{nickname}}</text>
    </container>
  </container>
</template>

<style>
  .male {...}
  .female {...}
</style>

<script>
  module.exports = {
    data: {
      list: [
        {gender: 'male', nickname: 'Li Lei', avatar: '...'},
        {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
        ...
      ]
    }
  }
</script>


循环的过程中，不是 数组中循环的对象也是可以被嵌套调用的。

用$index可以获取到当前是在数组中的第一个。


正常情况下，track-by会导致整个循环列表被重新渲染。使用track-by可以尽可能地复用已经存在的，在使用track-by语法时，不要使用数据绑定语法。