在模版中,我们通常会判断数据的状态,跟进状态来判断是否显示或则展示
在 vue.js 中我们通过操作 v-if & v-show 来处理这样的需求

v-if

<div id="app">
	<h1 v-if="text">{{ text }}</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
	text : "hello vue.js"
  }
});

v-else

<div id="app">
	<h1 v-if="text">{{ text }}</h1>
	<h1 v-else>暂无内容</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
	text : false
  }
});

引入指令必须要添加到一个元素上,使用 v-if 时需要同时输出多个平级的元素,可以使用 template 标签

template

export

source

<div id="app">
	<template v-if="state">
		<p>content 1</p>
		<p>content 2</p>
		<p>content 3</p>
		<p>content 4</p>
	</template>
</div>
var app = new Vue({
  el: '#app',
  data: {
	state : true
  }
});
template 不会输出到 dom 中,只会在 vue 内部被解析,页面结构中不会多一个元素

v-show

v-show 与 v-if 的区别
v-if 当表达式为真实才会在页面结构中加入 dom
v-show 当表达式为真时才显示 dom 元素,为假时隐藏元素,隐藏它内部是使用 display:block 与 display:none 来实现的
<div id="app">
	<h1 v-show="text">{{ text }}</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
	text : "hello vue.js"
  }
});

使用 v-show 不能与 template 混用