vue.js条件语句

最新推荐文章于 2023-12-13 08:30:00 发布

黄宝康

最新推荐文章于 2023-12-13 08:30:00 发布

阅读量477

点赞数

分类专栏： VUE 文章标签： vue.js条件语句

本文链接：https://blog.csdn.net/huangbaokang/article/details/100526331

版权

VUE 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

主要掌握内容如下：

1,v-if 用于条件性地渲染一块内容

2,在template元素上使用 v-if 条件渲染分组最终的渲染结果将不包含 template>元素

3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”

4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

5,用 key 管理可复用的元素

6,v-show 只是简单地切换元素的 CSS 属性 display。

项目中用的最多的是template和 v-show

<!doctype html>
<html lang="gbk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My First VUE  page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <h2>v-if</h2>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no</h1>
    <h2>template元素</h2>
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
    <h2>v-else</h2>
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <h2>v-else-if</h2>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    <h2>用key 管理可复用的元素</h2>
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>
    <br/>
    <button @click="toggle()">Toggle login type</button>
    <h2>v-show</h2>
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            awesome: false,
            ok:false,
            type:'D',
            loginType:'username'
        },
        methods:{
            toggle(){
                this.loginType=this.loginType=='username'?'email':'username';
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

黄宝康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js条件语句

主要掌握内容如下：1,v-if 用于条件性地渲染一块内容2,在template元素上使用 v-if 条件渲染分组最终的渲染结果将不包含 template>元素3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：5,用 key 管理可复用的元素6,v-sho...
复制链接

扫一扫