vue中的v-show指令和v-if

最新推荐文章于 2023-09-24 14:37:42 发布

前端交互仔

最新推荐文章于 2023-09-24 14:37:42 发布

阅读量3.5k

点赞数

分类专栏： js 文章标签： vue

本文链接：https://blog.csdn.net/liulang68/article/details/107055907

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

v-if假如为false直接就不加载这个标签，
v-show只是改变css的display的属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>
    <div id="app">
    <input type="button"  value="切换显示状态"  @click="changeIsShow">
    <input type="button"  value="累加年龄"  @click="addAge">
    <img v-show="isShow" src="1.jpg" alt="">
    <img v-show="age>=18" src="1.jpg" alt="">
    </div>
        
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function(){
                this.isShow=!this.isShow;
            },
            addAge:function(){
                this.age++;
            }
        }
    })
</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端交互仔

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
vue中的v-show指令和v-if

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vu.
复制链接

扫一扫