不喜欢看文字的同学，可以观看下方?视频。
VUE有一个条件指令：v-if。
它表示只有条件成立时才会渲染内容。类似js里的if语句，只不过它是用在模版里的if。
用法如下：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <div v-if="isShow">刘小妞的栖息地div> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'isShow':true } })script>也可以用v-else指令，表示否则，类似js里的else语句。
用法如下：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <div v-if="isShow">刘小妞的栖息地div> <div v-else>vue课程div> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'isShow':false } })script>还有一个v-else-if指令，类似js里的else if语句。
用法如下：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <div v-if="flag < 0">刘小妞的栖息地div> <div v-else-if="flag == 0">vue课程div> <div v-else>条件指令div> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'flag':3 } })script>v-else必须跟在v-if或者v-else-if后面。
v-if、v-else、v-else-if是可以嵌套使用的，并且它们是可以用在template标签上的。
用template标签最大的好处是可以不用额外添加不需要的标签，页面最终渲染出来是不包括template标签的。比如：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <template v-if="loginType == 'phone'"> <label>手机号label> <input placeholder="输入手机号"> template> <template v-else> <label>邮箱label> <input placeholder="输入邮箱"> template> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'loginType':'phone' } })script>用key管理可复用的元素
VUE为了更高效的渲染元素，通常会复用已有的元素，上面的例子label和input就会复用。我们可以加一个按钮来改变一下loginType的值。
代码如下：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <template v-if="loginType == 'phone'"> <label>手机号label> <input placeholder="输入手机号"> template> <template v-else> <label>邮箱label> <input placeholder="输入邮箱"> template> <button @click="change">切换button> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'loginType':'phone' }, methods:{ change(){ this.loginType = 'email' } } })script>显示手机号时，我们输入手机号，点击切换按钮，发现刚刚输入的手机号仍然显示在输入框里。input只是换了一下placeholder的值。
有时候，我们确实需要显示两个不同的input，这个时候，我们给input添加不同的key值就可以了，比如：
<html> <head> <meta charset="utf-8"> <title>vue-条件title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <div id="app"> <template v-if="loginType == 'phone'"> <label>手机号label> <input placeholder="输入手机号" key="phone"> template> <template v-else> <label>邮箱label> <input placeholder="输入邮箱" key="email"> template> <button @click="change">切换button> div> body>html><script> var app = new Vue({ 'el':'#app', 'data':{ 'loginType':'phone' }, methods:{ change(){ this.loginType = 'email' } } })script>v-show
v-show指令也是根据条件显示。
v-show和v-if的区别：
v-show不能和v-else一起用，也不能用在template标签上。
v-show是通过改变标签css属性里的display来实现的显示隐藏。
显示的时候display值为block，隐藏的时候，display值为none。
不管显示隐藏，DOM中始终会有v-show的元素。
v-if则不然，只有v-if的值为真时，才会渲染元素。
如果切换比较频繁的话，用v-show好点，否则，用v-if更好一些。
不推荐v-if和v-for同时使用(会大大降低页面效率)。
当v-if和v-for一起使用时，v-for比v-if的优先级高。
也就是说，无论v-if是否为真，v-for都会执行一遍。
同时使用的情况一般会有两种情况。
一种是v-if的判断条件需要用到v-for里每一项里的数据，这种情况，我们改成计算属性，把计算过滤后的结果返回就可以了，至于计算属性，我们后面会讲。
还有一种情况是v-if的判断条件和v-for里的数据没关系，这种情况，我们直接把v-if单独拿出来判断就可以了，比如：
<ul> <li v-for="item in list" v-if="isShow">li>ul>我们可以改为如下代码：
<ul v-if="isShow"> <li v-for="item in list">li>ul>
往期 精彩 回顾
扫一扫
3994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
