vue渲染

Posted 2021-02-14 zsj-02-14

渲染：条件渲染，列表渲染

1.条件渲染

v-if、v-else、v-else-if       v-else、v-else-if 必须跟在v-if、v-else-if 之后否则不会被识别

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don‘t
</div>
<!-- 如果切换多个元素，可以在外面包含一层template，template不会显示 -->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<!--  v-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>
<div v-else>
  Not A/B/C
</div>

key管理可复用的元素

下面例子中，input如果没有添加key，会复用，切换时，用户输入的值，会保留，只是替换了placeholder

添加了唯一值key，input是两个独立的，每次切换时，都会重新渲染

<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-show    v-show始终渲染，只是切换display属性，不支持<template>元素

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

v-if与v-show的区别

• v-if只有当满足条件时，才会被渲染。v-show是一直都会渲染且存在。
• v-if会销毁和重建。v-show并不会销毁，只会切换css的display属性。
• 如果运行时条件很少改变，则使用v-if。如果会频繁切换，则使用v-show。

2.列表渲染

v-for   v-for指令根据一组数组的选项列表进行渲染。绑定key：key 防止重用和重新排序现有元素

渲染数组

item in items语法，可以使用 of 代替 in，支持可选的第二个参数 (item, index) in items

<ul id="example-1">
  <li v-for="item in items"  :key="item.id">
    {{ item.message }}
  </li>
</ul>
<!-- 带index -->
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

 

var example1 = new Vue({
  el: ‘#example-1‘,
  data: {
    items: [
      { message: ‘Foo‘ },
      { message: ‘Bar‘ }
    ]
  }
})

v-for和v-if

当v-for和v-if处于同一节点时，v-for的优先级比v-if的优先级高。如果你是有条件的跳过循环的执行，可以将v-if置于外层元素(或<template>)。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
//只显示未完成的todo
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>
//置于外层循环

渲染对象

value in object方法，支持第二个参数key和第三个参数index 

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

new Vue({
  el: ‘#v-for-object‘,
  data: {
    object: {
      firstName: ‘John‘,
      lastName: ‘Doe‘,
      age: 30
    }
  }
})