# v-bind
`v-bind`對標簽的屬性可以綁定數據
# v-bind:class
操作元素的類名或者內聯樣式，是一個常見的需求。可以結合表達式，進行字符串拼接即可，不過易出錯。vue還提供我們可以通過`v-bind`處理`class`和`style`。可以是字符串，也可以是**對象或者數組**。
對象的形式會用的較多。其它形式可以參見官網文檔自行學習即可（經過多年的實踐很少用）
## vue-tab欄標簽切換
```html
<style>
button.active{
background: yellow;}
ul{ list-style: none;
margin:0;}
li{ margin:0;
width: 100px;
height: 100px;
background: pink;
border: 1px solid #000;
display: none;}
li.active{
display: block;
}
</style>
<div id="app">
<button :class="{'active':index==sign}" @click="sign=index" v-for="(item,index) in btns">{{index}}按鈕{{item}}</button>
<ul>
<li :class="{'active':index==sign}" v-for="(item,index) in lis">列表{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
sign:0,
btns:[1,2,3,4],
lis:[1,2,3,4]
}
})
</script>
```
## 簡易版todolist
用到了數組操作。數組追加`push` `unshift` `shift` `pop` `splice`等。并且還用到了事件指令傳參等功能。
```html
<div id="app" class="container">
<input type="text" class="form-control" v-model="user" @keyup.enter="getUser()">
<br>
<ul class="list-group">
<li class="list-group-item list-group-item-info" v-for="(item,index) in users">
{{item}}
<span class="close" @click="shan(index)">×</span>
</li>
</ul>
<button class="btn btn-success btn-block">共有{{users.length}}條數據</button>
</div>
<script>
new Vue({
el:"#app",
data:{
users:[],
user:""
},
methods:{
getUser(){
if(this.user.trim()!==""){
this.users.push(this.user);
}
this.user = "";
},
shan(index){
this.users.splice(index,1);
}
}
});
</script>
```
## vue-焦點圖
這里面用到了\*\*`v-bind:style**`屬性，通過這個案例我們也可以學到關于`**生命周期`\*\*的一點知識。
```html
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#app{
width: 100%;
overflow: hidden;
position: relative;
}
ul{
width: 500%;
position: relative;
left: 0;
top: 0;
transition: 1s;
}
ul li{
width: 20%;
float: left;
}
ul li img{
width: 100%;
}
ol{
position: absolute;
left: 50%;
margin-left: -60px;
bottom: 20px;
}
ol li{
width: 14px;
height: 14px;
background: #ccc;
float: left;
margin: 0 5px;
cursor: pointer;
}
ol li.cur{
background:#f10180;
}
.btn{
position: absolute;
width: 45px;
height: 45px;
cursor: pointer;
top: 50%;
margin-top: -22px;
}
.prev{
left: 0;
background:url("images/btn_l.png");
}
.next{
right: 0;
background:url("images/btn_r.png");
}
</style>
<div id="app" @mouseover="stop()" @mouseout="autoplay()">
<ul :style="{'width':width,'left':left}">
<li v-for="(item,index) in list" :style="{'width':liwidth}"><img :src="item" alt=""></li>
</ul>
<ol>
<li :class="{'cur':cur==index}" v-for="(item,index) in list" @click="change(index)"></li>
</ol>
<span class="btn prev" @click="less()"></span>
<span class="btn next" @click="add()"></span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
cur:0,
list:["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg"],
timer:null
},
computed:{
width:function(){
return this.list.length*100+"%";
},
liwidth:function(){
return 1/this.list.length*100+"%";
},
left:function(){
return -this.cur*100+"%"
}
},
methods:{
add:function(){
this.cur++;
//if(this.cur>this.list.length-1){this.cur=0}
//cur++，然后讓新的cur等于加后的cur+個數/個數取余，其實剛好可以處理邊界，省去判斷
this.cur = (this.cur+this.list.length)%this.list.length;
},
less:function(){
this.cur--;
//if(this.cur<0){this.cur=this.list.length-1}
this.cur = (this.cur+this.list.length)%this.list.length;
},
change:function(index){
this.cur = index;
},
autoplay:function(){
var that = this;
this.timer = setInterval(function(){
that.add();
},2000);
},
stop:function(){
clearInterval(this.timer);
}
},
mounted:function(){
this.autoplay();
}
});
</script>
```
