Vue中v-bind指令控制类名

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

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

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

在这个示例中，我们使用了三元表达式来根据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]);
    
}