1. v-if
语法：v-if="表达式"
v-else-if="表达式"
v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注：v-if可以和v-else-if、v-else一起使用，但要求结构完整，不能被中间打断
2. v-show
语法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素不会被移除，仅仅是使用样式隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 使用v-show作条件渲染 -->
<!-- <h2 v-show="false">你好，{{name}}</h2> -->
<!-- <h2 v-show="1 === 3">你好，{{name}}</h2> -->
<!-- 使用v-if作条件渲染 -->
<h2 v-if="false">你好，{{name}}</h2>
<h2 v-if="1 === 1">你好，{{name}}</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- v-else和v-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>测试</div>
<template v-if="n === 1">
<h2>孙笑川</h2>
<h2>刘波</h2>
<h2>Giao哥</h2>
</template>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '#root',
data: {
name: '孙笑川',
n: 0
}
})
</script>
</body>
</html>
评论 (0)