七叶笔记 » golang编程 » Vue基础入门，第12节 v-if使用，与v-show的区别

Vue基础入门，第12节 v-if使用，与v-show的区别

分类: golang编程 | 浏览: 195

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

v-if 的作用

根据表达式的真假来切换元素的显示状态。

原理是通过操作DOM元素进行切换状态。当表达式为true，切换显示，当表达式为false，切换删除。 

 <p v-if="see">我看到你了</p>

也可以写成表达式 

 <p v-if="scroll>90">优秀</p>

那么v-show和v-if有什么区别？

v-if：操作的是DOM，如果为false，那么久直接移除。缺点是消耗资源较多。

v-show：操作的是css ，如果为false,那么style=”display: none;”。

频繁切换采用v-show，因为消耗资源小，因此日常用v-show。

源码： 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <p><input type="button" value="切换显示" @click="toggleSee"></p>
    <p v-if="see">我看到你了</p>
    <p v-show="see">我用v-show看到你了</p>
    <p v-if="scroll>90">优秀</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            see: false,
            scroll: 95
        },
        methods: {
            toggleSee: function () {
                this.see = !this.see
            }
        }
    })
</script>
</body>
</html>

相关文章