Vue——条件渲染

最新推荐文章于 2022-07-16 16:12:39 发布

Volcano_WQL

最新推荐文章于 2022-07-16 16:12:39 发布

阅读量96

点赞数

分类专栏： Vue.js自学笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_45614713/article/details/105077419

版权

Vue.js自学笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="vue.js"></script>
</head>
<body>
<!--view-->
    <div id="app">
        <h1>用户名：{{username}}</h1>
        <h3 v-if="isvip">用户类型:VIP</h3>
<!--        true显示，false 显示v-else对应的内容->
<! -- Attention：v-if 与 v-else 中间不能有其他元素（标签-->
        <h4 v-else> 用户类型：普通</h4>
        <hr>
        <h1>用户允许登录时间</h1>
<!--        条件渲染的属性值类型为 boolean   -->
        <h3 v-if="age>18"> 允许24小时登录</h3>
        <h3 v-else-if="age>14">允许8小时</h3>
        <h3 v-else>允许4小时</h3>
    </div>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                username:"小欧",
                isVip:true,
                age:24,
            }
        })
    </script>
</body>
</html>

Volcano_WQL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——条件渲染

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="vue.js"></script></head><body>...
复制链接

扫一扫