Java教程

条件渲染

本文主要是介绍条件渲染，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

v-if

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

<h1 v-if="awesome">Vue is awesome!</h1>

<!DOCTYPE html>
<html lang="zh">

<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>v-if</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <h1 v-if="huangzihan">黄子涵</h1>
    </div>
    <script>
        var VM = new Vue({
            el: '#hzh',
            data: {
                huangzihan: false
            }
        })
    </script>
</body>

</html>

image

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no
这篇关于条件渲染的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航