v-show/v-if? ? 控制元素顯示或隱藏
v-show 是用display:none耻卡;來控制元素顯示或隱藏的
v-if 是用visibility:hidden;來控制元素顯示或隱藏的
display:none與visibility:hidden的區(qū)別
1.display:none是徹底消失,不在文檔流中占位,瀏覽器也不會(huì)解析該元素腰懂;visibility:hidden是視覺上消失了,可以理解為透明度為0的效果项秉,在文檔流中占位,瀏覽器會(huì)解析該元素慷彤;
2.使用visibility:hidden比display:none性能上要好娄蔼,display:none切換顯示時(shí)visibility,頁面產(chǎn)生回流(當(dāng)頁面中的一部分元素需要改變規(guī)模尺寸底哗、布局岁诉、顯示隱藏等,頁面重新構(gòu)建跋选,此時(shí)就是回流涕癣。所有頁面第一次加載時(shí)需要產(chǎn)生一次回流),而visibility切換是否顯示時(shí)則不會(huì)引起回流前标。
例如有三個(gè)table坠韩,將中間的一個(gè)table hidden掉距潘,你會(huì)發(fā)現(xiàn)在那個(gè)被hidden的table看不見了,但是只搁,中間會(huì)留有很大的一空白音比,而這個(gè)空白就是這個(gè)table沒有被隱藏時(shí)所占的位置
而none的作用更像是把元素從網(wǎng)頁中“去除”(當(dāng)然不是真的去除,只是效果是如此)
例如有三個(gè)table氢惋,將中間的一個(gè)table none掉洞翩,你會(huì)發(fā)現(xiàn)在剩下的兩個(gè)table中間不會(huì)有任何的空白。就好像中間的那個(gè)table從來不存在過一樣
v-bind ? ?綁定元素 ? ?v-bind:屬性名=‘值’
例:
<script>
new Vue({
? ? ? ? ? el:'.itany',
? ? ? ? ? data:{
? ? ? ? ? ? ? url:'img/1.jpg',
? ? ? ? ? ? ? hef:'img/2.jpg'
? ? ? ? ? },
? ? ? ? ? methods:{
? ? ? ? ? ? ? chg:function(){
? ? ? ? ? ? ? ? ? this.url=this.hef
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? })
<script>