vue渲染

Posted zsj-02-14

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue渲染相关的知识,希望对你有一定的参考价值。

渲染:条件渲染,列表渲染

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
    }
  }
})

 

以上是关于vue渲染的主要内容,如果未能解决你的问题,请参考以下文章

Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

vue中axios请求成功了如何把数据渲染到页面上?

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置