Vue-条件渲染.列表渲染

条件渲染:

v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回truthy值得时候被渲染.

<h1 v-if="awesome">Vue is awesome!</h1>
添加v-else块:
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
添加v-if-else块
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

因为 v-if 是一个指令,所以必须将它添加到一个元素上,但是如果想切换多个元素,此时可以把一个<template>元素当做不可见的包裹元素,并在上面使用v-if.最终的渲染结果将不包含<template>元素.

Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.但是有时候.我们不想让他复用,只需要在元素上面添加一个具有唯一值得key属性.

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染:

我们可以用v-for指令基于一个数组来渲染一个列表.v-for指令需要使用item in items形式的特殊语法,其中items是源数据数据,而item则是被迭代的数组元素的别名.(类似于java中的增强for)

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

我们也可以用 of 替代 in 作为分隔符,因为它更接近JavaScript迭代器的语法:

<div v-for="item of items"></div>

我们也可以使用 v-for 来遍历一个对象属性:

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

输出结果:

三个参数做索引:

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

输出: