我的 Vue.js 学习日记 (五) - 条件渲染

上节回顾

v-bind:class与v-bind:style的用法现在脑子里已经有一个概念了,想不起来的时候也可以回过来再看一下,现在的主要目的是知道有这个东西,知道他是干嘛的就够了。

v-if

v-if用来 销毁/重建 元素,销毁后的元素变成:<!---->

v-if绑定到 <template> 后,template 元素中的子元素将与它同生共死

具体用法:

html:

<h2 v-if="ok">用于单个元素</h2>

<template v-if="ok">

  <h2>用于template</h2>

  <p>我只是为了表示说我和h2是一个模块的</p>

</template>

js:

data:{
  ok: 1
}

v-if v-else v-else-if

这里记录一下写法:

<h3 v-if="ok===1">ok : 1</h3>
<h3 v-else-if="ok===2">ok : 2</h3>
<h3 v-else-if="ok===3">ok : 3</h3>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

ok同v-if段落,运行后在F12Console处修改ok值查看效果

元素复用与key

元素复用

尝试运行下面代码,切换到ok:2之后输入值,之后切换到ok:3

<h3 v-if="ok===1">ok : 1</h3>
<template v-else-if="ok===2">
  <input type="text" placeholder="这里是ok:2">
</template>
<template v-else-if="ok===3">
  <input type="text" placeholder="这里是ok:3">
</template>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

通过观察可以发现,切换到ok:3后,之前输入的值还在,但删除输入的值后,placeholder提示它确实是ok:3

tip:注意切换顺序,必须是2 -> 3

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。

那么复用性在带来高效的同时,也有一定的弊端,就像2 -> 3我并不需要带过来原有值怎么办?

key

不想要复用的元素需要去为他们指定key

修改后的上段落代码:

<h3 v-if="ok===1">ok : 1</h3>
<template v-else-if="ok===2">
  <input type="text" placeholder="这里是ok:2" key="ipt-2">
</template>
<template v-else-if="ok===3">
  <input type="text" placeholder="这里是ok:3" key="ipt-3">
</template>
<h3 v-else>ok 不等于 1、2、3任意一个</h3>

可以再次运行查看效果。

tip:没有key的元素依然会复用

v-if 与 v-show

用法:

html:

<h3 v-show="ok===0">我是v-show</h3>

js:

data:{
  ok: 1
}

输出:

<h3 style="display: none;">我是v-show</h3>

在控制台修改app.ok=0后:

输出:

<h3 style="">我是v-show</h3>

v-showv-if的区别还是蛮明显的,v-show总是会渲染出元素,只是在修改他的style

另外,v-show不能作用在template,也不可以与v-else-ifv-else配合使用

小节

在使用v-if时需要注意元素的复用性,使用v-show时要知道它一直存在

    原文作者:bei6
    原文地址: https://segmentfault.com/a/1190000014747383
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞