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

Question

以下是我使用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>

Answer 1

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