v-if 也是惰性的:如果在初始渲染时條件为假则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。相比之下v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换
在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index是当前数组元素的索引。另外可以为索引指定一个别名(如果 v-for 用于一个对象,则可以为对象的键指定一个别名):
渲染一个包含多个元素的块需要将多个标签都用v-for遍历,那麼就需要用template标签同样,template在实际渲染的时候不会出现只是起到一个包裹作用。
变异方法(修改了原始数组):
vue.js包装了被观察数组的变异方法故它们能出发视图更新,即当利用这些方法变更数组时被渲染的内容会实时更新,被包装的方法有:
替换数组(返回一个新数组):
数组从一个数组变为另一个数组时(记得数组是按引用传递的),数据绑定依然生效;但前提是使用以下方法:
有时需要用全新对潒(例如通过 API 调用创建的对象)替换数组因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整個列表但是,如果每个对象都有一个唯一 ID 的属性便可以使用 track-by 特性给
Vue.js 一个提示,Vue.js 因而能尽可能地复用已有实例
然后可以这样给出提示:
如果没有唯一的键供追踪,可以使用 track-by="$index"它强制让 v-for 进入原位更新模式:片断不会被移动,而是简单地以对应索引的新值刷新这种模式也能处理数据数组中重复的值。
这让数据替换非常高效但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变不能同步臨时状态(比如 <input> 元素的值)以及组件的私有状态。因此如果 v-for 块包含 <input> 元素或子组件,要小心使用