条件渲染

2022-05-26 20:33:03 作者：互联网

`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>

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

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 标签：黄子涵,Vue,show,元素,else,渲染,条件	

来源： https://www.cnblogs.com/Huang-zihan/p/16314821.html