vue基础之条件渲染

--categories:

vue基础
tags:
vue条件渲染

条件渲染

条件渲染

v-if ,v-else-if ,v-else 与 v-show

v-if 和v-show 的区别

v-if初始化时没有额外的渲染开销，会修改DOM节点的，开销较大

v-show会在渲染时，自动增加节点渲染。

当需要节省渲染开销时，使用v-show

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue起步和插值</title>
</head>
<body>
    <div id="app">

    <span>v-if v-else</span>
    <!-- Math.random() 随机产生0到1之间的随机数 -->
    <div v-if='Math.random() > 0.5'>
    	显示
    </div>
    <div v-else>
    	隐藏
    </div>
    <hr>
    <span>v-if v-else</span>
    <!-- isShow变量定义在data数据中 -->
    <div v-if='isShow'>
    	显示
    </div>
    <div v-else>
    	隐藏
    </div>
    <hr>
	<span>show</span>
	<!-- show变量定义在data数据中 -->
	<div v-show='show'>
		显示
	</div>
    </div>
    
    <!-- 1. 引包-->
	<script src="./vue.js"></script>
	<script>
        // 2.初始化
        const vm = new Vue({
            el: '#app',
            // 数据属性
            data: {
                isShow: Math.random() > 0.5 ,
                show:false
            }
        })

	</script>
</body>
</html>