史上最详细 VUE2.0 全套 demo 讲解 基础4（条件渲染）

做者 ： 混元霹雳手 - Ziksang

三篇基础发布以后，收到最多的就是谢谢楼主，其次的就是错别字有点多，这篇我确定写完以后读三遍，如今已是夜里2点了，若是还有没有发现你们就容忍一下，此次我将要讲的是条件渲染，对于条件渲染我以为思来思去真没有什么好写的，可是既然我说过了这个是掘进史上最详细那我就要坚持个人创做，作一个最完整的教程出来，可是若是你真的从头至尾把这文章看下去，我相信你确定会有收获

接下来仍是按着咱们约定的来

1.本文分享 计算属性

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

v-if 条件渲染

在1.0的时候咱们只有v-if v-else
但在2.0的时候多了一个v-else-if 我只能说有用的不行不行的
更多什么专业名词的解释去看看官网那确定比我这里好，我这里就是讲一些官网没有，甚至比官网还好的demo

先简单的看一个demo
若是是一般思惟写法，我相信确定是这么写

应用场景
由于我处在一家金融公司，理财师能够取消和申请客户活动的参与次格，若是客户是已经参与的那我能够取消参与，若是不是参与的我能够申请参与，正常作项目咱们不可能由于逻辑稍微复杂咱们分开两个页面作，一个作取消，一个作申请，那是一件很傻的事，若是再多一个选项你启不是要再写一个页面，可是咱们如今只能在页面根据不一样的判断，只能显示取消或者申请两个其中之一，那就用v-if v-else

<template>
     <div>
         <h1 v-if="result == 'No'">申请参与</h1>
         <h1 v-else>取消参与</h1>
     </div>
</template>

<script>
     export default {
         data () {
             return {
                 result : 'No'
             }
         }
     }
</script>复制代码

OK那没有问题，若是result是no的话咱们就申请参与，不然就是取消参与，这只是一个试用的例子，咱们正常的场景确定不是这样的，不用看这个result值确定是调取后台结口，通过查询返还你result这个字段，那就是一个异步请求，咱们能够模拟一下，看看会有什么结果，你结对意想不到

<template>
     <div>
         <h1 v-if="result == 'No'">申请参与</h1>
         <h1 v-else>取消参与</h1>
     </div>
</template>

<script>
     export default {
         created () {
             setTimeout(()=>{
                 this.result = 'No'
             },1000)
         },
         data () {
             return {
                 result : ''
             }
         }
     }
</script>复制代码

咱们在created生命周期里模拟一个ajax请求，当发送请求后，两秒钟后请求返回，会发生什么结果，结果一脸蒙B，你会发现先显示取消参与，两秒后会再显示申请参与，这本质上跟咱们正常的判断逻辑js同样，if.....else......
若是if不成立直接成立else,由于2秒后result发生了变化，重新计算了v-if和v-else，
若是你的页面中result参数是从sessionStorage取到或者是从url参数上截取来的，ok不会有影响
这是一个坑一个大坑那怎么办那就轮到v-if-else出场了

<template>
     <div>
         <h1 v-if="result == 'No'">申请参与</h1>
         <h1 v-else-if="result == 'Yes'">取消参与</h1>
     </div>
</template>

<script>
     export default {
         created () {
             setTimeout(()=>{
                 this.result = 'No'
             },1000)
         },
         data () {
             return {
                 result : ''
             }
         }
     }
</script>复制代码

咱们拿v-else-if 再作一个判断，在ajax不返回以前若是result不等于no或者不等于yes我则什么都不显示，让初始result直接等于""，直到接口返回改变了数据，重新渲染了页面，则会显示申请参与，不会像上面形成那种一闪的效果

v-if and v-for template

1.由于 v-if 是一个指令，须要将它添加到一个元素上。可是若是咱们想切换多个元素呢？此时咱们能够把一个 template 元素当作包装元素，并在上面使用 v-if。最终的渲染结果不会包含 template 元素。
2.v-if 与 v-for 一块儿使用
当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。
我把以上两种官方给的这句话我用一个demo给你们展现一下就明白了

应用场景
这个场景也是我这两天作项目刚作到的，如今一个用户能够天天领一份保险，保险有效期七天，时间长了，他就有会不少保单，有生效的保单和过时的保单，全部保单还有保单详情，产品经理要我把过时的保单只显示一个保单号，没过时的保单全部详情全显示出来

<template>
     <div>
        <div v-for='(item,index) in insurance'>
            <template v-if='nowTime < item.endtime'>
                <p>{{item.code}}</p>
                <p>{{item.name}}</p>
                <p>{{item.tel}}</p>
                <hr></hr>
            </template>
            <template v-else-if='nowTime > item.endtime'>
                <p>{{item.code}}</p>
                <hr></hr>
            </template>
        </div>
     </div>
</template>

<script>
     export default {
         created () {
                let myDate = new Date();
                let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
                let month = myDate.getMonth()+1; //获取当前月份(0-11,0表明1月)
                let day = myDate.getDate(); //获取当前日(1-31)
                if(day<10){
                    day = '0'+day
                }
                if(month<10){
                    month = "0"+month
                }
                this.nowTime=`${year}-${month}-${day}`
             var insurance = [
                 {endtime :'2017-02-01',code : '111111111',name:'ziksang', tel:'1000000000'},
                 {endtime :'2017-02-03',code : '222222222',name:'ziksang2', tel:'2000000000'},
                 {endtime :'2017-09-10',code : '333333333',name:'ziksang3', tel:'3000000000'},
                 {endtime :'2999-02-01',code : '444444444',name:'ziksang4', tel:'4000000000'}
             ]
             this.insurance = insurance
         },
         data () {
             return {
                 nowTime : "",
                 insurance : []
             }
         }
     }
</script>复制代码

endtime:保单结束时间
code:保单号
name : 保单用户名
tel：保单用户手机

我先在最外层作一个循环v-for,再经过根据当前时间与保单结束时间对比，若是当前时间大于保单结束日，则用v-else-if 里面的模板，反之则用v-if里的模板，每一个模板有着本身不一样的dom结构，我想你们必定恍然大悟看懂了

过了一天，我很生气生气，产品经理跑过来又跟我说了一个需求，他说霹雳手，我一看他叫我霹雳手我就知道他要找我麻烦了，我回了句请叫我混元霹雳手-ziksang哈哈，不出我所料，在上面的需求加了一个功能，

改动应用场景

上面的一个功能不变，若是是过时的保险不光要显示保单号，再过时的保单上面加一个按钮，若是用户点击以后能够显示详情，再点击以后又能够收起来，只显示保单号，我当场就说了一句话没有vue作不到的，给我十分种 ，啪啪啪以后就改好了

这里牵到两个知识点，官方话语：
v-if 是“真正的”条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
通常来讲， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不太可能改变，则使用 v-if 较好。
注意， v-show 不支持 template 语法，也不支持 v-else。

<template>
     <div>
        <div v-for='(item,index) in insurance'>
            <template v-if='nowTime < item.endtime'>
                <p>{{item.code}}</p>
                <p>{{item.name}}</p>
                <p>{{item.tel}}</p>
                <hr></hr>
            </template>
            <template v-else-if='nowTime > item.endtime'>
                <button @click='item.arrow = !item.arrow'>按钮</button>
                <p>{{item.code}}</p>
                <p v-show='item.arrow == true'>{{item.name}}</p>
                <p v-show='item.arrow == true'>{{item.tel}}<p>
                <hr></hr>
            </template>
        </div>
     </div>
</template>

<script>
     export default {
         created () {
                let myDate = new Date();
                let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
                let month = myDate.getMonth()+1; //获取当前月份(0-11,0表明1月)
                let day = myDate.getDate(); //获取当前日(1-31)
                if(day<10){
                    day = '0'+day
                }
                if(month<10){
                    month = "0"+month
                }
                this.nowTime=`${year}-${month}-${day}`
             var insurance = [
                 {endtime :'2017-02-01',code : '111111111',name:'ziksang', tel:'1000000000',arrow:false},
                 {endtime :'2017-02-03',code : '222222222',name:'ziksang2', tel:'2000000000',arrow:false},
                 {endtime :'2017-09-10',code : '333333333',name:'ziksang3', tel:'3000000000',arrow:false},
                 {endtime :'2999-02-01',code : '444444444',name:'ziksang4', tel:'4000000000',arrow:false}
             ]
             this.insurance = insurance
         },
         data () {
             return {
                 nowTime : "",
                 insurance : []
             }
         }
     }
</script>复制代码

1.这里我再每份保单里加了一个字段为arrow做为按钮开关
2.由于过时保单里的详情是用户虽时会切换显示的，因此咱们用到v-show,减小dom来回去除的开销。很神奇吧，一个demo就把条件渲染讲的明明白白，透透彻彻。

我看我分享的这段时间里，有些同窗都以为我分享的东西很基础，基础的才是万变不离其中的东西，下篇我将给你们分享点复杂点的东西，我本身写的vue日历组件，支持接口最大时间，小最时间，起始时间，区间段不让选时间，尽请期待。

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899

支持我继续创做和感到有收获的话，请向我打赏点吧

若是转载请标注出自@混元霹雳手ziksang