| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <script src="../../vue.js"></script>
- </head>
- <body>
- <div id="app">
- <!-- 条件渲染指令：v-if -->
- <!-- 当 v-if绑定的值 为 真时， 才会创建并渲染该标签；如果为假 就会销毁该标签 -->
- <p v-if="show">你能看见我吗</p>
- <p v-else>我看不见你</p>
- <p>分数：{{ score }}</p>
- <p v-if="score >= 90">秀儿</p>
- <p v-else-if="score >=70">良儿</p>
- <p v-else-if="score >=60">还中</p>
- <p v-else>啥也不是</p>
- <!-- 条件渲染指令：v-show -->
- <p v-show="show">我是v-show</p>
- <p v-show="score >= 90">秀儿</p>
- <p v-show="score >=70 && score < 90">良儿</p>
- <p v-show="score >=60 && score < 70">还中</p>
- <p v-show="score < 60">啥也不是</p>
- <p>
- <p> v-if vs v-show </p>
- v-if
- 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if
- 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show
- 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS
- 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show
- 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
- 较好；如果在运行时条件很少改变，则使用 v-if 较好。
- </p>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- show: false,
- score: Math.ceil(Math.random() * 100),
- },
- });
- </script>
- </body>
- </html>
|
