条件渲染控制:v-if&v-show

LiAng2023年11月30日大约 2 分钟约 491 字

基本说明

Vue 提供了 v-if 和 v-show 条件指令完成条件渲染/控制

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染 v-if</title>
</head>
<body>
<div id="app">
    <!--这里可以看到checkbox的 checked属性的值-->
    <input type="checkbox" v-model="sel">是否同意条款[v-if实现]
    <!--
        v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1>
    -->
    <h1 v-if="sel">你同意条款</h1>
    <h1 v-else>你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
    //为了调试方便, 使用vm接收Vue实例
    let vm = new Vue({
        el:"#app",
        data:{
            sel:0
        }
    })
</script>
</body>
</html>

v-show

官方文档：https://cn.vuejs.org/v2/guide/conditional.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染 v-show</title>
</head>
<body>
<div id="app">
    <!--这里可以看到checkbox的 checked属性的值-->
    <input type="checkbox" v-model="sel">是否同意条款[v-show实现]
    <!--
        v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件
    -->
    <h1 v-show="sel">你同意条款</h1>
    <h1 v-show="!sel">你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>
    //为了调试方便, 使用vm接收Vue实例
    let vm = new Vue({
        el:"#app",
        data:{
            sel:false
        }
    })
</script>
</body>
</html>

v-if VS v-show

1.v-if 会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建 2.v-show 机制相对简单, 不管初始条件是什么，元素总是会被渲染，并且只是对 CSS 进行切换 使用建议：如果要频繁地切换，建议使用 v-show ；如果运行时条件很少改变，使用 v-if 较好