Vue特定模板语法实战（二）

您所在的位置：网站首页 › vue条件渲染知识点 › Vue特定模板语法实战（二）

Vue特定模板语法实战（二）

2024-07-16 07:33| 来源: 网络整理| 查看: 265

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

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

条件渲染

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

A B C Not A/B/C var vm = new Vue({ el: '#example', data: { type: 'A'} })

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

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

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

例子：

Username Email var vm = new Vue({ el: '#example', data: { loginType: 'username'}, methods: { toggle: function () { this.loginType = (this.loginType!="username")?"username":""; }, } })

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

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

在input加上不同key的例子：

Username Email var vm = new Vue({ el: '#example', data: { loginType: 'username'}, methods: { toggle: function () { this.loginType = (this.loginType!="username")?"username":""; }, } })

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

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

v-show

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

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

A B C D var vm = new Vue({ el: '#example', data: { type: "A"} })

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

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

本章节教程结束。

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

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

特定模板语法实战：

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

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

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

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

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

【本文地址】

Vue特定模板语法实战（二）

Vue特定模板语法实战（二）

今日新闻

推荐新闻