v-bind:繫結一個屬性
v-bind:屬性名="";可簡寫為：屬性名=""
<div class="box">
<img v-bind:src="url" alt="">
<a :href="url">連結</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
url:"img/1.jpg"
}
})
</script>
<!--用v-bind寫圖片切換-->
<div class="box">
<img v-bind:src="url" alt="" v-on:click="fun">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
url:"img/1.jpg",
flag:true//困難問題要習慣應用中間量
},
methods:{
fun:function(){
if(this.flag){
this.url="img/2.jpg";
this.flag=false;
}else{
this.url="img/1.jpg";
this.flag=true;
}
}
}
})
</script>
<!--用v-bind寫選項卡-->
<div class="box">
<img :src="url" alt="">
<ul>
<li v-for="(value,index) in last" v-on:click="fun(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
url:"img/1.jpg",
last:["img/1.jpg","img/2.jpg","img/3.jpg"]
},
methods:{
fun:function(ind){
this.url=this.last[ind]
}
}
})
</script>
<!-- v-show:控制元素的顯示和隱藏 display：none 控制檯顯示
v-if:控制元素的顯示和隱藏 visibility：hidden 控制檯不顯示-->
<div class="box">
<p v-show="see">{{message}}</p>
<h1 v-if="!see">{{message}}</h1>
<!-- 加！為反隱藏-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
see:true,
message:"hello vue"
}
})
</script>
<!--用v-show寫切換-->
<div class="box">
<button v-on:click="fun">切換</button>
<div class="box-in" v-show="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
see:true
},
methods:{
fun:function(){
/*方法一：this.see=!this.see*/
//方法二：
if(this.see){
this.see=false
}else{
this.see=true
}
}
}
})
</script>
<!--用v-show寫選項卡-->
<div class="box">
<ul>
<li v-for="(value,index) in last" v-on:click="fun(index)">{{value}}</li>
</ul>
<div class="box-in" v-show="see">{{eg}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
eg:["這是選項一的內容"],
last:["選項一","選項二","選項三"],
message:["這是選項一的內容","這是選項二的內容","這是選項三的內容"],
see:true
},
methods:{
fun:function(ind){
this.eg=this.message[ind]
}
}
})
</script>
<!--v-if/v-else-if/v-else-->
<!--類似於js中的多重else···if()-->
<div class="box">
<ul>
<li v-if="mum==0">0</li>
<li v-else-if="mum==1">1</li>
<li v-else-if="num==2">2</li>
<li v-else-if="num==3">3</li>
<li v-else="num==4">4</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
num:Math.floor(Math.random()*(4-0)+0)//隨機數公式
}
})
</script>
display:none和visibility:hidden的區別是：
1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none效能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。