Vue.js从入门到跑路-条件渲染与列表渲染

条件渲染

我们可以使用v-if指令有条件的去渲染内容，内容只有指令的值为真才被渲染

<p v-if="show">helloworld</p>

还可以给v-if搭配一个v-else，添加一个“else区块”

<p v-if="show">helloworld</p>
<p v-else>hellovue</p>
<button @click="show=!show">点我</button>

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

还可以给v-if搭配一个v-else-if，添加一个“else-if区块”

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>

一个 v-else-if 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

如果我们需要渲染一个带有多个元素的块我们可以使用<template>标签，渲染的结果不会包含<template>标签

<template v-if="show">
  <h1>hello</h1>
  <p>vue</p>
  <p>world</p>
</template>

v-if只有在首次条件变为true的时候才会渲染内容

除了v-if,我们还可以采用v-show来有条件的渲染内容

<h1 v-show="show">Hello</h1>

与v-if不同的是，v-show只是在控制元素的display的css属性，且不支持在<template>标签使用和v-else搭配使用

列表渲染

v-for可以基于一个数组渲染列表，指令的值需要使用item in items的格式，items即数据数组，item是数据项的别名。

<li v-for="item in items">
  {{ item.message }}
</li>

以上代码就可以将item数组的每个值的message属性循环打印出来

我们还可以在指令值里加上第二个参数，代表的是当前项的位置索引

<li v-for="(item,index) in items">
  {{ item.message }} - {{index}}
</li>

对于多层嵌套的v-for,每个v-for作用域都能访问到父级作用域

也可以使用of作为分隔符替代in

v-for除了遍历数组，还可以遍历对象。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

第二个参数代表当前项的属性名，第三个代表的是当前项的位置索引

<p v-for="n in 10">{{ n }}</p>

还可以以整数作为值，上述代码会打印1-10

如果我们需要渲染一个带有多个元素的块我们可以使用<template>标签，渲染的结果不会包含<template>标签

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li>{{ item.name }}</li>
  </template>
</ul>

当它们v-if和v-for存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

当数据项的顺序发生改变时，Vue 默认不会移动DOM元素的顺序，而是会让他们在原有的索引位置上渲染，为了解决这个问题，我们可以给每个节点加上唯一的key，从而重用和重新排序现有的元素

<div v-for="item in items" :key="item.id">
</div>

我们除了直接填写数据数组外，还可以填写计算属性处理过的数组

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

<li v-for="n in evenNumbers">{{ n }}</li>