Weex前端語義支持通過兩種特殊屬性（if和repeat）的設(shè)置來確定組件的顯示狀態(tài)，這會使得整個頁面布局顯得更加靈活。

if

通過設(shè)置if屬性值，可以控制當前組件節(jié)點的顯示狀態(tài)。如果設(shè)為true，則會將當前節(jié)點置于DOM中渲染，反之則會從DOM中移除。

<template>
    <container>
        <text onclick="toggle">Toggle</text>
        <image src="..." if="{{shown}}"></image>
    </container>
    </template>
 
    <script>
        module.exports = {
        data: {
            shown: true
        },
        methods: {
        toggle: function () {
            this.shown = !this.shown
        }
        }
    }
    </script>

repeat

repeat屬性用于控制具有相同樣式或?qū)傩缘慕M件節(jié)點做重復渲染。它綁定的數(shù)據(jù)類型必須為數(shù)組，其中每個數(shù)組項的屬性會分別綁定到需要重復渲染的各子組件上。

 <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>

此外，weex同樣支持不在repeat數(shù)組中的數(shù)據(jù)綁定到重復渲染的組件節(jié)點上。

<template>
    <container>
        <container repeat="{{list}}" class="{{gender}}">
        <image src="{{avatar}}"></image>
        <text>{{nickname}} - {{group}}</text>
        </container>
    </container>
    </template>
 
    <style>
    .male {...}
    .female {...}
    </style>
 
    <script>
    module.exports = {
        data: {
            group: '...',
             list: [
                {gender: 'male', nickname: 'Li Lei', avatar: '...'},
                {gender: 'female', nickname: 'Han Meimei', avatar: '...'},
                 ...
            ]
        }
    }
    </script>

repeat屬性擴展

使用 $index 獲取當前節(jié)點所綁定的數(shù)據(jù)在repeat數(shù)組中的索引值.
例如：

 <div repeat="{{list}}">
        <text>No. {{$index + 1}}</text>
    <div>

獲取repeat數(shù)組的屬性值.
例如：

<div repeat="{{v in list}}">
        <text>
              No. {{$index + 1}}, {{v.nickname}}
        </text>
 </div>

<div repeat="{{(k, v) in list}}">
      <text>No. {{k + 1}}, {{v.nickname}}</text>
    </div>

使用 track-by 追蹤特殊的屬性
通常情況下，當更新repeat數(shù)組時，所有數(shù)組元素關(guān)聯(lián)的組件節(jié)點都會被重新渲染。如果其中部分節(jié)點的數(shù)據(jù)在更新前后未發(fā)生變更，那么最好是讓這些節(jié)點保持原樣，僅更新數(shù)據(jù)有變化的節(jié)點，weex提供了track-by屬性能幫您輕松搞定。
注意: track-by屬性的設(shè)置不支持數(shù)據(jù)綁定的方式

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

如前所述，當更新repeat數(shù)組時，如果檢測到屬性nickname的值前后一致，那么它所綁定的子節(jié)點將不被重新渲染。

簡化寫法

對于if和repeat的使用，可以簡化處理，即if="show"和if="{{show}}"所表達的前端語義相同。

<template>
    <container>
        <text if="shown">Hello</text>
        <text if="{{shown}}">Hello</text>
    </container>
    </template>
 
    <script>
        module.exports = {
        data: function () {return {shown: true}}
    }
    </script>

很顯然，這兩個text文本會被同時顯示出來。