v-if v-else v-show元素的显示和隐藏

最新推荐文章于 2023-10-12 13:40:33 发布

weixin_30268921

最新推荐文章于 2023-10-12 13:40:33 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/7637903.html

版权

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div v-if='ok'>如果为真显示</div>
        <div v-else>否则显示这个元素</div>   移除  在查看元素里不显示 
    </div>

    <div id="box">
        <div v-if='ok'>如果为真显示</div>
        <div v-if='!ok'>否则显示这个元素</div>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data:{
            ok:'aaa'
        }
    })
    // 在后面紧跟v-else，可以在ok为false的情况下，显示相应的内容。
    // 注意，v-else必须紧跟v-if，否则不会生效。
</script>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div v-show='ok'>如果为真显示</div>
        <div v-else>否则显示这个元素</div>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data:{
            ok:'aaa'
        }
    })

    //如果ok为false,<h1 v-show="ok">Hello!</h1>这个节点不会被移除，而仅仅是看不见。
    //我们看到v-show后面也可以跟v-else；
    //在新版本中，v-show不支持<template>语法，也不支持v-else。

//v-if和v-show区别
// v-show 是控制style display 样式。
// v-if v-else 不显示的不会加载标签

</script>
</html>


<!-- 
如果要频繁切换显示隐藏，就用v-show；
如果要提高整个页面的加载速度，就用v-if。 -->

//二次视频学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if和v-show</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <h1>v-if 和 v-show</h1>
    <div id="app">
        <div v-if="isLogin">请登陆！</div>  <!-- 判断v-if 是否为真  为真显示本标签内容 -->
        <div v-else>你好，蔡蔡！</div>    <!-- 以上条件不成立显示本标签内容 -->
        <div v-show="isLogin">v-show 内容</div> <!--判断isLogin是否为真  为真显示 -->
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            isLogin:false
        }
    })

//v-if和v-show区别 
//  v-show  是控制style  display  样式 。
// v-if v-else   不显示的  不会加载标签

</script>
</html>

转载于:https://www.cnblogs.com/jinsuo/p/7637903.html

weixin_30268921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if v-else v-show元素的显示和隐藏

<!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="b...
复制链接

扫一扫