以下是我使用vue写的前端页面，为什么我后面两条语句时v-bind是无法生效的呢

以下是我使用vue写的前端页面，为什么我后面两条语句时v-bind是无法生效的呢？

<template>
    <view>
        <view class="block" :class="{attackBlock:attackState}" @click="attack()"></view>
        <view class="block" :class="attackState ? 'attackBlock' : ''" @click="attack()"></view>
        <view class="block" :class="`attackBlock:${attackState}`" @click="attack()"></view>
        <view class="block" :class="'attackBlock:'+attackState" @click="attack()"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                attackState:true
            }
        },
        methods: {
            attack(){
                this.attackState=!this.attackState
            }
        }
    }
</script>

<style>
    .block{
        width: 200rpx;
        height: 200rpx;
        background: green;
    }
    .attackBlock{
        background: pink;
        border-radius: 25rpx;
    }
</style>

第三个不对是因为:class绑定中不需要使用模板字符串，只需在双引号内使用表达式即可
第四个不对是因为在绑定中使用加号连接字符串不是合法的方式

<template>
  <view>
    <view class="block" :class="{ attackBlock: attackState }" @click="attack"></view>
    <view class="block" :class="attackState ? 'attackBlock' : ''" @click="attack"></view>
    <view class="block" :class="[attackState ? 'attackBlock' : '']" @click="attack"></view>
    <view class="block" :class="`attackBlock ${attackState ? 'attackState' : ''}`" @click="attack"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      attackState: true
    }
  },
  methods: {
    attack() {
      this.attackState = !this.attackState
    }
  }
}
</script>

<style>
.block {
  width: 200rpx;
  height: 200rpx;
  background: green;
}

.attackBlock {
  background: pink;
  border-radius: 25rpx;
}
</style>

我想知道一下这个是属于哪个知识点的（ps：双引号中需要的是什么类型，如何输入正确的类型），我好去学习学习哈哈

Class与Style绑定章节

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7659149
• 这篇博客也不错, 你可以看下vue-bind 使用
• 您还可以看一下 汤小洋老师的Vue3.0快速入门课程中的 常用指令v-bind 小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue中实现拖拽效果中的 注：如果你想在bind中使用 this 那么你就这样写 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  Vue.directive('drag'
      drag: {
        // 指令的定义
        bind= () =>{
        		console.log(this)
        }
      }  
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^