Vue特定模板语法实战（二）—— 条件渲染

最新推荐文章于 2022-06-20 09:04:05 发布

厚嘴猴

最新推荐文章于 2022-06-20 09:04:05 发布

阅读量250

点赞数

分类专栏： vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/jcyka/article/details/105953787

版权

vue学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

条件渲染

上一章：Vue入门实战教程（三）—— 视图层：模板及指令

v-if, v-else-if, v-else

v-if 指令：用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else-if 指令：顾名思义，充当 v-if 的“else-if 块”，可以连续使用
v-else指令：来表示 v-if 的“else 块”

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
    <template v-if="type === 'A'">
      <div>A</div>
    </template>
    <template v-else-if="type === 'B'">
      <div>B</div>
    </template>
    <template v-else-if="type === 'C'">
      <div>C</div>
    </template>
    <template v-else>
      <div>Not A/B/C</div>
    </template>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: { type: 'A'}
})
</script>
</body>
</html>

输出结果：
在这里插入图片描述

key属性: 不同的值使元素不复用

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。
在下面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
    <br/>
    <input type="button" @click="toggle()" value="toggle loginType value"/>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: { loginType: 'username'},
  methods: {
    toggle: function () {
      this.loginType = (this.loginType!="username")?"username":"";
    },
  }
})
</script>
</body>
</html>

点击切换按钮前：
在这里插入图片描述
点击切换按钮后：

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可

在input加上不同key的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
    <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>
    <br/>
    <input type="button" @click="toggle()" value="toggle loginType value"/>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: { loginType: 'username'},
  methods: {
    toggle: function () {
      this.loginType = (this.loginType!="username")?"username":"";
    },
  }
})
</script>
</body>
</html>

点击切换按钮前：
在这里插入图片描述

点击切换按钮后：
在这里插入图片描述
总结：
Vue默认是复用（不重新渲染）已有元素，除非指定不同的key，Vue才会不复用（重新渲染）

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样。
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

重写v-if的例子，这次使用v-show：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
    <div v-show="type === 'A'">A</div>
    <div v-show="type === 'B'">B</div>
    <div v-show="type === 'C'">C</div>
    <div v-show="type !== 'A' && type !== 'B' && type !== 'C'">D</div>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: { type: "A"}
})
</script>
</body>
</html>

运行结果：
在这里插入图片描述
可以看到B,C,D元素还在，只是css样式变成display:none而导致看不见了。

v-if和v-show的区别

	v-if	v-show
语法	支持 <template> 元素，支持 v-else	不支持 <ttemplate> 元素，也不支持 v-else
渲染时间	惰性的，条件第一次变为真时，才会开始渲染条件块	不管初始条件是什么，元素总是会被渲染
条件变化后的渲染方式	条件块内的事件监听器和子组件适当地被销毁和重建	只是简单地切换元素的 CSS property display
初始渲染开销	低	高
切换开销	高	低
使用场景	在运行时条件很少改变	需要非常频繁地切换

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

下一章：Vue入门实战教程（四）—— 模型层：数据

特定模板语法实战：

Vue特定模板语法实战（一）：Class和Style绑定

Vue特定模板语法实战（二）：条件渲染

Vue特定模板语法实战（三）：列表渲染

Vue特定模板语法实战（四）：事件处理

Vue特定模板语法实战（五）：表单输入绑定

厚嘴猴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue特定模板语法实战（二）—— 条件渲染

特定模板语法详解（二）——条件渲染v-if在元素上使用 v-if 条件渲染分组功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导...
复制链接

扫一扫

专栏目录