--categories:
vue 基础
tags:
vue 条件渲染
条件渲染
v-if ,v-else-if ,v-else 与 v-show
v-if 和 v-show 的区别
v-if 初始化时没有额外的渲染开销, 会修改 DOM 节点的, 开销较大
v-show 会在渲染时, 自动增加节点渲染.
当需要节省渲染开销时, 使用 v-show
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue 起步和插值 </title>
- </head>
- <body>
- <div id="app">
- <span>v-if v-else</span>
- <!-- Math.random() 随机产生 0 到 1 之间的随机数 -->
- <div v-if='Math.random()> 0.5'>
显示
- </div>
- <div v-else>
隐藏
- </div>
- <hr>
- <span>v-if v-else</span>
- <!-- isShow 变量定义在 data 数据中 -->
- <div v-if='isShow'>
显示
- </div>
- <div v-else>
隐藏
- </div>
- <hr>
- <span>show</span>
- <!-- show 变量定义在 data 数据中 -->
- <div v-show='show'>
显示
- </div>
- </div>
- <!-- 1. 引包 -->
- <script src="./vue.js"></script>
- <script>
- // 2. 初始化
- const vm = new Vue({
- el: '#app',
- // 数据属性
- data: {
- isShow: Math.random()> 0.5 ,
- show:false
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3383754.html