Vue简明实用教程(05)——v-if和v-show指令

Posted 谷哥的小弟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue简明实用教程(05)——v-if和v-show指令相关的知识,希望对你有一定的参考价值。


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

v-if和v-show指令概述

v-if和v-show指令用于根据判断条件显示或隐藏元素。

当条件判断结果为真时显示元素,当条件判断结果为假时隐藏元素。

语法

v-if="true|false|逻辑运算表达式|data中boolean类型变量的值"
v-show="true|false|逻辑运算表达式|data中boolean类型变量的值"

区别

v-if底层通过控制dom树上节点实现页面标签的展示和隐藏

v-show底层通过控制元素css中display属性实现元素展示和隐藏

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

v-if和v-show指令示例

在此,以示例形式详细介绍v-if和v-show指令的基本使用。

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () 
            new Vue(
                el: "#div1",
                data: 
                    name: "谷哥的小弟",
                    number: 9527,
                    isIf: true,
                    isShow: false
                ,
                methods: 
                
            );
        
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者:谷哥的小弟</h2>
    <h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3 v-if="true">设置v-if="true"</h3>
        <h3 v-show="false">设置v-show="false"</h3>
        <h3 v-if="isIf">设置v-if="isIf"</h3>
        <h3 v-show="isShow">设置v-show="isShow"</h3>
        <h3 v-show="9>6">设置v-show="9>6"</h3>
        <h3 v-show="name.length>2">name</h3>
    </div>
</body>
</html>



示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () 
            new Vue(
                el: "#div1",
                data: 
                    name: "谷哥的小弟",
                    number: 9527,
                    isShow: false
                ,
                methods:
                    // 修改data中isShow的值
                    showElement()
                       this.isShow=true;
                    ,
                    // 修改data中isShow的值
                    hideElement()
                        this.isShow=false;
                    ,
                    // 修改data中isShow的值
                    switchElement()
                        this.isShow=!this.isShow;
                    
                
            );
        
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者:谷哥的小弟</h2>
    <h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">

        <!--依据data中的isShow控制标签的隐藏与显示-->
        <h3 v-show="isShow">name</h3>

        <button @click="showElement">显示元素</button>
        <br/><br/>
        <button @click="hideElement">隐藏元素</button>
        <br/><br/>
        <button @click="switchElement">切换元素的隐藏与显示</button>
        <br/><br/>
    </div>
</body>
</html>


示例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () 
            new Vue(
                el: "#div1",
                data: 
                    name: "谷哥的小弟",
                    number: 9527,
                    isShow: true
                ,
                methods:
                    // 修改data中isShow的值
                    showElement()
                        this.isShow=true;
                    ,
                    // 修改data中isShow的值
                    hideElement()
                        this.isShow=false;
                    ,
                
            );
        
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者:谷哥的小弟</h2>
    <h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <!-- 利用鼠标悬停和移出事件修改data中isShow的值从而隐藏或显示元素 -->
        <div style="width: 450px;height: 200px;background: greenyellow;" v-show="isShow" @mouseover="hideElement" @mouseout="showElement"></div>
    </div>
</body>
</html>


以上是关于Vue简明实用教程(05)——v-if和v-show指令的主要内容,如果未能解决你的问题,请参考以下文章

Vue简明实用教程(12)——axios

Vue简明实用教程(12)——axios

Vue简明实用教程(01)——Vue框架入门

Vue简明实用教程(01)——Vue框架入门

Vue简明实用教程(14)——Vue的组件

Vue简明实用教程(14)——Vue的组件