Vue学习笔记03Vue语法

最新推荐文章于 2024-07-25 15:19:10 发布

Jatine

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122518765

版权

文章目录

- Vue学习笔记03Vue语法

Vue学习笔记03Vue语法

条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

if-else

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>条件渲染</title>
</head>
<body>
<div id="app">
    <h1 v-if="awesome">Vue is awesome</h1>
    <h1 v-else>Oh no</h1>
</div>
<script>
    var app = new Vue({
   
        //element的缩写，挂载元素
        el:"#app",
        data:{
   
            //从model中将awesome拿出来在视图页面中展示出去
            awesome:true
        }
    })
</script>
</body>
</html>

运行结果如图
在这里插入图片描述
如果将“true”改为“false”，则

else-if

代码

<!DOCTYPE html>
<html lang="en">
<head>

最低0.47元/天解锁文章

Jatine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记03Vue语法

文章目录Vue学习笔记03Vue语法if-elseVue学习笔记03Vue语法if-else代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>条件渲染</t
复制链接

扫一扫

专栏目录