Vue 第四讲（v-if，v-show 属性）

最新推荐文章于 2024-04-17 17:35:45 发布

是我来晚了！

最新推荐文章于 2024-04-17 17:35:45 发布

阅读量859

点赞数 1

分类专栏：前端文章标签： vue html javascript python js

本文链接：https://blog.csdn.net/weixin_51927215/article/details/116335220

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue

三则运算符
条件判断
案例，切换登录界面
显示

三则运算符

三则运算符：属性:判断条件?true 执行:false 执行
split 方法：将 Vue 中定义的变量按照某种格式拆分成数组

<!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">
        <p v-bind:style="{color:flag?'red':'blue'}">Javascript表达式</p>
        <h1>{{name.split(" ")}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true,
                name:"Hello SUSU"
            }
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述

条件判断

更完整的格式

v-if
v-else-if
v-else

Html 代码如下

v-if 语法： v-if="条件判断"
判断成立则显示此标签，否则标签压根不会被加载出来

<!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">
        <p v-if="weather=='rain'">宅家里</p>
        <p v-else-if="weather=='sun'">出去玩</p>
        <p v-else>啥也不干</p> 
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                weather:"sun"
            }
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述

案例，切换登录界面

Html 代码如下

标签（input）里面的属性（placeholder）是提示，如果指定了提示内容，则会在输入框里面显示出来
标签里面的属性（key）是

<!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">
        <div v-if="loginType=='email'">
            <label>邮箱：</label>
            <input type="text" placeholder="登！！！邮箱" key="email">
        </div>
        <div v-if="loginType=='QQ'">
            <label>QQ：</label>
            <input type="text" placeholder="快登QQ！！！" key="QQ">
        </div>
        <button v-on:click="ChangeLoginType">切换登录方式</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                loginType:"email"
            },
            methods:{
                ChangeLoginType:function(){
                    this.loginType = this.loginType=="email"?"QQ":"email"
                }
            }
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述

显示

Html 代码如下

v-show 属性是控制标签样式的显示与否
v-if 属性是控制标签的加载与否

<!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">
        <img src="艾米莉亚.jpg" v-show="isShow">
        <button v-on:click="changeImgShow">图片的显示与隐藏</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods:{
                changeImgShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>