Vue中v-bind指令控制类名

在Vue中，你可以使用动态绑定来控制类名的显示和隐藏。具体来说，你可以使用v-bind指令（简写为:）将类名绑定到一个表达式，并根据表达式的值来决定是否显示或隐藏类名。

<template>  
  <div>  
    <button @click="show = !show">切换显示/隐藏</button>  
    <div :class="{ 'my-class': show }">  
      Hello, Vue!  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      show: true  
    };  
  }  
};  
</script>

在上面的示例中，我们定义了一个名为show的数据属性，初始值为true。当点击按钮时，show的值会切换为false或true。然后，我们使用v-bind指令将my-class类名绑定到show的值。如果show为true，则显示my-class类名；如果show为false，则隐藏my-class类名。

在Vue中，你也可以使用三元表达式来控制类名的显示和隐藏。下面是一个示例：

<template>  
  <div>  
    <button @click="show = !show">切换显示/隐藏</button>  
    <div :class="show ? 'my-class' : ''">  
      Hello, Vue!  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      show: true  
    };  
  }  
};  
</script>

在这个示例中，我们使用了三元表达式来根据show的值决定是否显示my-class类名。如果show为true，则显示my-class类名；如果show为false，则不显示任何类名。

三目运算符也称为条件运算符，它是一种简化条件表达式的结构。其语法如下：

条件 ? 值1 : 值2

let age = 18;  
  
let canDrink = (age >= 18) ? "可以喝酒" : "不能喝酒";  
  
console.log(canDrink); // 输出 "可以喝酒"

案例：

//html
:class="{'hideChangeBgc':item.id==ctrlBgc[0]?true:false}"

//js
let ctrlBgc = reactive([1])

function changeBgc(id:number){
    ctrlBgc.splice(0,1,id)
    // console.log(ctrlBgc[0]);
    
}