VueJS之条件判断

最新推荐文章于 2024-05-29 00:13:10 发布

GaloisAlex

最新推荐文章于 2024-05-29 00:13:10 发布

阅读量988

点赞数 2

分类专栏：前端框架 Vue 文章标签： Vue VueJS 前端框架 Vue条件判断

本文链接：https://blog.csdn.net/qq_42110976/article/details/96484175

版权

前端框架同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

布尔条件判断：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <h1 v-if="finished">{{ message }}</h1>        //标签属性v-if="布尔值键名"进行判断
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            message : 'Hello World',
            finished : false                //布尔值
        }
    });
</script>
</body>
</html>

Chrome打开开发者调试工具Console进行测试：

app.finished = true

数值判断：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <h1 v-if="number > 5 && number < 10">{{ message }}</h1>    //v-if判断语句
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            message : 'Hello World',
            number : 6                        //数值
        }
    });
</script>
</body>
</html>

Chrome打开开发者调试工具Console进行测试：

app.number = 4

v-if,v-elseif,v-else判断语句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <h1 v-if="number < 5">{{ message1 }}</h1>
    <h1 v-else-if="number > 5 && number < 10">{{ message2 }}</h1>
    <h1 v-else="">{{ message3 }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            message1 : 'Hello 1 World',
            message2 : 'Hello 2 World',
            message3 : 'Hello 3 World',
            number : 6
        }
    });
</script>
</body>
</html>

Chrome打开开发者调试工具Console进行测试：

app.number = 3
app.number = 7
app.number = 12

GaloisAlex

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VueJS之条件判断

布尔条件判断：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Gamacode.com</title></head><body><div id="app"> &lt...
复制链接

扫一扫