vue小練習——選項卡切換
阿新 • • 發佈:2018-11-30
上午做了個選項卡的小練習,很簡單,可以熟悉語法吧。
上程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
body{
font-family :"Microsoft YaHei";
}
#tab{
width: 450px;
height: 280px;
margin: 0 auto;
border: 1px solid cornflowerblue;
}
.tab-tit{
font-size: 0;
width: 450px;
height: 40px;
}
.tab-tit a{
float: left;
display: inline-block;
height : 40px;
line-height: 40px;
font-size: 16px;
width: 33.33%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con{
width: 100%;
text-align : center;
}
.tab-con span{
display: block;
margin-top: 100px;
}
</style>
<body>
<div id="tab" >
<div class="tab-tit" >
<a href="javascript:;" v-for="(item,index) in tit" @click="skip(index)" :class="{'cur':item.curId===1}">{{item.title}}</a>
</div>
<div class="tab-con">
<span v-text="span_data"></span>
</div>
</div>
</div>
</body>
<script>
var vu=new Vue({
el: '#tab',
data: {
tit:[
{
curId: 1,
title:'html'
},
{
curId: 0,
title:'css'
},
{
curId: 0,
title:'javascript'
},
],
span_data:'html'
},
methods: {
skip:function(index){
for(var i=0;i<this.tit.length;i++){
this.tit[i].curId=0;
}
this.tit[index].curId=1;
this.span_data=this.tit[index].title;
}
},
})
</script>
</html>
【總結】
1、對於v-for的迴圈體有了更清楚的瞭解。
2、v-text={{}},而且v-text是單向繫結,也就是當vue裡的物件值改變時頁面顯示的值會改變,但是頁面值改變不會影響物件值。但是v-model可以實現雙向繫結。v-model用於input,select等表單元素。其他地方使用不起作用。