Vue的簡單使用（4）：class、：style

在Vue中動態的改變樣式，我們可以綁定class，也可以綁定style

綁定的class裏面可以寫對象，也可以寫數組，數組裏面寫對象

<template>
  <div id="app">
  <div class="shape" @click="isCircle=!isCircle" :class="{circle:isCircle}"></div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data(){
   return{
    isCircle:false
   } 
  },
  methods:{
   
  }
}
</script>
<style scoped>
</style>

對象都寫在這裏，如果有10個類，那麼就要寫10個鍵值對，導致HTML模板的可讀性很差；

那我們怎麼做出改變呢?

這時候要注意，我們不能在data裏面獲取data的數據

<template>
  <div id="app">
  <div class="shape" @click="isCircle=!isCircle" :class="{circle:isCircle}"></div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data(){
   return{
    isCircle:false,
    divClass:{
     circle:this.isCircle
    }
   } 
  },
  methods:{
   
  }
}
</script>
<style scoped>
</style>

我們可以把動態改變樣式的代碼寫在計算屬性裏面：class或者：style都可以這樣做

<template>
  <div id="app">
  <div class="shape" @click="isCircle=!isCircle" :class="divClass"></div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data(){
   return{
    isCircle:false
   } 
  },
  computed:{
     divClass:function(){
      return{//返回類名
        circle:this.isCircle,
        blue:!this.isCircle
     }
    }
  }
}
</script>
<style scoped>
</style>

我們不僅僅想要這個類顯示或者隱藏，如果我們想直接改變這個類的類名應該怎麼做

我們可以做到在輸入框中，輸入red，或者blue，來改變div的樣式

1.在data中定義屬性color："blue"，模板中<div :class="color"></div>，input框雙向數據綁定v-model="color"

2.寫blue，red，yellow對應的樣式

3.然後我們通過輸入red類名或者yellow類名，可以改變成對應的樣式