js 列表渲染、条件渲染

[bingoogolapple]

• 列表渲染

export default {
    data: {
        todoList: [
            {
                id: 11,
                title: '代办1',
                completed: false
            }, {
                id: 21,
                title: '代办2',
                completed: true
            }]
    }
}

<!-- tid 属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率 -->
<!-- 默认 $item 代表数组中的元素, $idx 代表数组中的元素索引 -->
<list-item class="todo-item" for="{{todoList}}" tid="id">
    <text onclick="openTodoDetailPage">
        {{$idx}} - {{$item.title}}
    </text>
</list-item>
<!-- 自定义元素变量名, $idx 还是代表数组中的元素索引 -->
<list-item class="todo-item" for="{{value in todoList}}" tid="id">
    <text onclick="openTodoDetailPage">
        {{$idx}} - {{value.title}}
    </text>
</list-item>
<!-- 自定义元素变量名和索引变量名, 此时 $idx 为 undefined，必须使用自定义的索引变量名来取索引值 -->
<list-item class="todo-item" for="{{(index, value) in todoList}}" tid="id">
    <text onclick="openTodoDetailPage">
        {{index}} - {{value.title}}
    </text>
</list-item>

[bingoogolapple]

• 条件渲染