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类名，可以改变成对应的样式