同步DOM结构
除了简单的单向绑定和双向绑定,MVVM还有一个重要的用途,就是让Model和DOM的结构保持同步。
我们用一个TODO的列表作为示例,从用户角度看,一个TODO列表在DOM结构的表现形式就是一组
- 节点:
-
-
-
产品评审
- 新款iPhone上市前评审
-
-
开发计划
- 与PM确定下一版Android开发计划
-
-
VC会议
- 敲定C轮5000万美元融资
todos: [
{
name: ‘产品评审’,
description: ‘新款iPhone上市前评审’
},
{
name: ‘开发计划’,
description: ‘与PM确定下一版Android开发计划’
},
{
name: ‘VC会议’,
description: ‘敲定C轮5000万美元融资’
}
]
使用MVVM时,当我们更新Model时,DOM结构会随着Model的变化而自动更新。当todos数组增加或删除元素时,相应的DOM节点会增加 -
- 或者删除
- 节点。
-
在Vue中,可以使用v-for指令来实现:
-
-
{
{ t.name
-