<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
条件渲染：
1.v-show
写法：v-show="xxx"，xxx是布尔类型表达式
适用于：切换频率较高的场景
特点：false时实际上是使用样式将元素隐藏了，但元素仍旧存在
2.v-if
写法：v-if="xxx"，xxx是布尔型表达式
衍生：v-else-if="xxx" 和 v-else
适用于：切换频率较低的场景
特点：false时直接将元素移除
注意：v-if v-else-if v-else使用时，元素必须紧密连在一起，不能被其它元素分隔
-->
<body>
<div id="root">
<h1>n的值为{{n}}</h1><br>
<button @click="n++">n的值加一</button><br>
<!-- v-show="xxx" xxx是布尔型表达式，当xxx为true时元素显示，为false时元素隐藏 -->
<div v-show="n===1">{{name}}</div>
<!--
v-if v-else-if v-else与常规使用无异，当判断为true时，元素显示，为false时元素隐藏
当v-if成立后就不会再去判断后面的了，v-else-if同理
-->
<div v-if="n===2">哈哈</div>
<div v-else-if="n===3">哈哈哈</div>
<div v-else>哈哈哈哈</div>
<!-- template与v-if配合使用可以实现隐藏或显示的效果，且不会影响实际结构，但无法与v-show配合使用 -->
<template v-if="n===5">
<h1>AAAA</h1>
<h1>BBBB</h1>
<h1>CCCC</h1>
<h1>DDDD</h1>
</template>
</div>
</body>
<script>
const vm = new Vue({
el: "#root",
data: {
name: "jms",
n: 0
}
})
</script>
</html>
浙公网安备 33010602011771号