vue如何设置动态的栅格占位、水平偏移量、类名、样式

<template>
  <a-row style="border: 1px solid">
    <a-col
      :span=" bool1 ? '6' : '10'"
      :offset=" bool1 ? '6' : '2'"
      :class="{ 'left-style': bool1, 'right-style':!bool1 }"
      :style="{ paddingRight: bool1 ? '10px' : '50px'}"
    >
      <div class="test-active"></div>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Self',
  data () {
    return {
      bool1: false
      }
  }
}
</script>

<style scoped>
.test-active {
  width: 100%;
  height: 200px;
  border: 1px solid blueviolet;
}
.left-style {
  background-color: pink;
}
.right-style {
  background-color: skyblue;
}
</style>

<template>
  <div class="home">
    <!-- 写法一：对象形式，用于指定单个样式是否切换-->
    <!-- <div :class="{select:num>=10}">动态样式切换</div> -->
    <!-- 写法二：用于指定多个样式切换 -->
    <!-- <div :class="[num>=10?'select':'noselect']" >动态样式切换</div> -->
    <!-- 写法三：复杂化的写法 -->
    <!-- <div :class="{select:arr.filter(item=>item).length>5}">动态样式切换</div> -->
    <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >动态样式切换</div> -->
    <div>动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>

<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>

<template>
  <div class="home">
    <!-- 动态设置style -->
    <div :style="{color:num>=10?'red':'blue'}">动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>

<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>