vue的綁定屬性v-bind

v-bind的簡略介紹

v-bind用於綁定一個或多個屬性值，或者向另一個組件傳遞props值。目前，個人所用之中，更多的是使用於圖片的鏈接src，a標簽中的鏈接href，還有樣式以及類的一些綁定，以及props傳遞的時候，在子組件的標簽中所綁定。目前在做的項目中，有些例子，記錄下。多數情況下，為了簡潔，還是更喜歡寫”：“這個語法糖來代替v-bind，下面的例子中都是寫的這個。

v-bind綁定class
1.對象語法

//用法一：直接通過{}綁定一個類
<h2 :class="{'active': isActive}">Hello World</h2>

//用法二：也可以通過判斷，傳入多個值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

//用法三：和普通的類同時存在，並不沖突
//注：如果isActive和isLine都為true，那么會有title/active/line三個類
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

//用法四：如果過於復雜，可以放在一個methods或者computed中
//注：classes是一個計算屬性
<h2 class="title" :class="classes">Hello World</h2>

 

2.數組語法

<h2 :class="['active']">Hello World</h2>
<h2 :class=“[‘active’, 'line']">Hello World</h2>
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

//如果過於復雜，可以放在一個methods或者computed中
//注：classes是一個計算屬性
<h2 class="title" :class="classes">Hello World</h2>

實際情況下，感覺目前敲的還是用對象語法會更多些。記憶中最深的是，在寫tabbar組件的時候，為了實現tabbar中的文字，可以點擊時候變顏色，使用了綁定屬性。下方示例的active綁定了isactive，isactive為設置的一個計算屬性，如果為true時，會激活active，使得對應的<div>模塊，獲得active屬性。

<template>
  <div class="eachtabbar" v-on:click="itemclick">
<div v-if="!isactive"><slot name="img-dark"></slot></div>
    <div v-else> <slot name="img-light"></slot></div>
    <div v-bind:class="{active:isactive}"> <slot name="text"></slot></div>
  </div>
</template>

<script>
export default {
name: "eachtabbar",
  props:{
  path:String
  },
  data(){
  return{

  }
  },
  computed:{
  isactive(){
    return this.$route.path==this.path
  }
  },
  methods:{
  itemclick(){
    if(this.$route.path==this.path){
      return
    }
    this.$router.push(this.path)
  }
  }
//if語句是為了處理相同路徑報錯問題
}
</script>

<style scoped>
.eachtabbar{
  flex: 1;
  text-align: center;
  height: 49px;
}
.eachtabbar img{
  height: 24px;
  width: 24px;
  margin-top: 3px;
  vertical-align: middle;
}
.active{
  color: yellow;
}
</style>

v-bind綁定style

1.對象語法

:style="{color: currentColor, fontSize: fontSize + 'px'}"，style后面跟的是一個對象類型。對象的key是CSS屬性名稱，對象的value是具體賦的值，值可以來自於data中的屬性。

2.數組語法

<div v-bind:style="[baseStyles, overridingStyles]"></div>，style后面跟的是一個數組類型 多個值以，分割即可。

還是上一個例子，在寫tabbar組件的時候，在想如果我不想每一塊的點擊都是一個顏色，那么怎么設置呢，因此使用了綁定style。計算屬性中設置了一個activeStyle屬性，且通過props默認若不更改情況下，默認設置為黃色。若要更改直接在標簽中直接設置active-color即是。

<template>
  <div class="tabbar-item" v-on:click="itemclick">
    <div v-if="!isActive"><slot name="item-pic"></slot></div>
    <div v-else><slot name="item-cli"></slot></div>
    <div v-bind:style="activeStyle"><slot name="item-text"></slot></div></div>
</template>

<script>
export default {
  name: "tabbaritem",
  props:{
    path:String,
    activeColor: {
      type:String,
      default:"yellow"
    }
  },
  data(){
    return{
      // isActive:true
    }
  },
  computed:{
    isActive(){
      return this.$route.path==this.path
    },
    activeStyle(){
      return this.isActive? {color:this.activeColor}:{}
    }
  },
  methods:{
    itemclick(){
      this.$router.push(this.path)
    }
  }
}
</script>

<style scoped>
.tabbar-item{
  flex: 1;
  text-align: center;
  height: 49px;
}
.tabbar-item img{
  height: 24px;
  width: 24px;
  margin-top: 3px;
  vertical-align: middle;
}
/*.active{*/
/*  color: #bfbf0d;*/
/*}*/

</style>