<div class='app'>
<img v-bind:src="url">
</div>
<script>
new Vue({
el:".app",
data:{
url:'img/1.jpg'
}
})
</script>
v-shou顯示隱藏
###點(diǎn)擊隱藏圖片
<div class='app'>
<img v-bind:src="url">
<p><button v-on:click="aa">點(diǎn)擊隱藏</button></p>
<img v-bind:src="url" v-show="see">
</div>
<script>
new Vue({
el:".app",
data:{
url:'1.jgp',
see:true
},
methods:{
aa;function(){
this.see=!this.see //方法一
//方法二
if(this.see){
this.see=false
}else{
this.see=true
}
}
}
})
</script>
###隱藏文字
<div>
<p>{{mag}}</p>
//!see 非顯示
<h1 v-shou="!see">{{mag}}</h1>
</div>
<script>
new Vue({
el:".app",
data:{
mag:"ni hao",
see:true
}
})
</script>
vue切換圖片
<div class='app'>
<img v-bind:src="url">
<ul>
<li v-for="(a,index) in list" v-on:click="chg(index)">{{index+1}}</li>
</ul>
</div>
<script>
new Vue({
el:".app",
data:{
list:["1.jpg",'2.jpg"],
url:''1.jpg"
},
methods:{
chg:function(ind){
this.url=this.list[ind]
}
}
})
</script>
來回切換圖片
<div>
<img v-bind:src="1/jpg" v-on:click="aa">
</div>
<script>
new Vue({
el:".app",
data:{
url:"1.jpg",
flag:true
},
methods:{
aa:function(){
if(this.flag){
this.url="2.jpg"
this.flag=false
}else{
this.url="1.jpg"
this.flag=true
}
}
}
})
</script>
v-if v-else-if v-else
//隨機(jī)數(shù)公式
//Math.floor(Math.random()*(max-min+1)+min)
<div class="app">
<p v-if="num==0">000</p>
<p v-else-if="num==1">111</p>
<p v-else-if="num==2">222</p>
<p v-else-if="num==3">333</p>
<p v-else-if="num==4">444</p>
<p v-else="num==5">555</p>
</div>
<script>
new Vue({
el:'.app',
data:{
//生成一到五的隨機(jī)數(shù)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
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ì)引起回流。
