作业三:区别 及隐藏选项卡

1.display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

2.主要运用v-show制作选项卡

<div id="itany">
        <ul>
            <li v-for="(val,index) in arr" @click="fun(index)">{{val.name}}</li>
            <li v-for="(val,index) in arr" style="width:304px" v-show="val.blool==true">{{val.content}}</li>
        </ul>
</div>
<script>
        new Vue({
            el:"#itany",
            data:{
                arr:[
                    {name:"选项卡一",content:"一的内容",blool:true},
                    {name:"选项卡二",content:"二的内容",blool:false},
                    {name:"选项卡三",content:"三的内容",blool:false}
                ]
            },
            methods:{
                    fun:function(ind){
                        for(var i=0;i<this.arr.length;i++){
                            this.arr[i].blool=false;   //利用for循环使blool全部遍历为false
                        }
                        this.arr[ind].blool=true;      //将arr的name下表传进来点击谁,谁变为true
                    }
                }
        })
</script>

效果：

QQ截图20180917112720.png