2018-09-11 vue控制元素

v-show/v-if 控制元素显示或隐藏

v-show 是用display：none；来控制元素显示或隐藏的

v-if 是用visibility：hidden；来控制元素显示或隐藏的

display：none与visibility:hidden的区别

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

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

例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置

而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）

例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样

v-bind    绑定元素    v-bind：属性名=‘值’

例：

new Vue({

          el:'.itany',

          data:{

              url:'img/1.jpg',

              hef:'img/2.jpg'

          },

          methods:{

              chg:function(){

                  this.url=this.hef

              }

          }

      })