vue v-if,v-show,v-for笔记

1. 条件渲染: v-if, v-else, v-show
      如果v-if为false，那么就直接不参与渲染； 如果v-show为false，则为display=none,仅仅是切换div的display属性值；


v-if使用:
<div v-if="isShow"></div>


v-if..v-else使用
<div v-if="isShow"></div>
<div v-else></div>


v-show使用
<div v-show="isShow"></div>









2. 关于template标签在 v-show, v-if上的使用:
可以将多个元素用template标签包含，然后再template标签上使用v-if, v-show来控制。


<template  v-if="show">
<div></div>
<div></div>
</template>


<template v-show="isShow">
<div></div>
<div></div>
</template>












3. v-for指令主要用用于列表渲染。


<ul>
<li v-for="(item, index) in items "  :key="index">
<h3> {{ item.title }} </h3>
<p> {{ item.description }} </p>
</li>
</ul>


new Vue({


el : "#app",
data: {


items : [
{ title: 'title-1', description: 'description-1' },
{ title: 'title-2', description: 'description-2' },
{ title: 'title-3', description: 'description-3' },
{ title: 'title-4', description: 'description-4' }
]
}
});


(1) v-for内置了$index变量，可以在v-for指令内调用，输出当前数组元素的索引。
(2) 需要注意vue.js对data中数组的原生方法进行封装，所以在改变数组时能触发视图更新。但是