使用 v-if 时可以和 template 连用,使用 template 不会破坏结构。
<!-- 准备好一个容器 -->
<div id="app">
<button type="button" @click="change">点击</button>
<h2>{{ n }}</h2>
<template v-if="n === 1">
<h2>你好</h2>
<h2>小明</h2>
<h2>北京</h2>
</template>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
n: 0,
},
methods: {
change() {
this.n++;
}
},
})
</script>