Javascript 如何通过单击事件使用vue.js进行多类绑定？

祝你有一个健康的日子。我试图解决的问题在概念上非常简单。我刚接触Vue.js，对类绑定的理解有一些问题。我正在准备一个小项目来理解这个主题。顶部有颜色按钮，底部有一个区域，单击这些按钮时会更改颜色。

const-app=Vue.createApp({
数据（）{
返回{
调色板：[
{
索引：1，
id:“红色”，
css_类：“红盒”
},
{
索引：2，
id:“蓝色”，
css_类：“蓝盒”
},
{
索引：3，
id:“绿色”，
css_类：“绿盒”
},
{
索引：4，
id:“黄色”，
css_类：“黄色框”
}
],
}
},
}).mount（“#app”）
.container{
宽度：100%；
高度：自动；
填充：10px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：开始；
-ms-flex-align：开始；
对齐项目：开始；
}
.css--class--app.css--palete{
列表样式类型：无；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.css--class--app.css--palete li{
宽度：50px；
高度：50px；
背景色：#ccc；
边界半径：50%；
左边距：5px；
边框：1px实心#bbb；
}
.css--类--应用程序结果框{
宽度：100%；
高度：100px；
背景色：#18bf71；
边缘顶部：15px；
边界半径：5px；
边框底部：1px实心#ccc；
-webkit过渡：背景色0.5s；
过渡：背景色0.5s；
}

CSS类应用程序



创建一个
activeClass
属性并将其绑定到结果框
class
。需要注意的一点是，您可以同时使用
class
和
：class
。两者都适用于：



data（）{
返回{
活动类：“”
}
}

单击后，更改
activeClass
：

@click=“activeClass=color.css\u class”

还将类绑定到按钮。总而言之：



您可能希望减少默认类的特殊性，或者在尝试为绑定类赋予优先级时会遇到一些复杂性（或者您可以只使用
！important
）。下面是一个演示：


const{createApp}=Vue；
const app=createApp({
数据（）{
返回{
activeClass:“”，
调色板：[
{
索引：1，
id:“红色”，
css_类：“红盒”
},
{
索引：2，
id:“蓝色”，
css_类：“蓝盒”
},
{
索引：3，
id:“绿色”，
css_类：“绿盒”
},
{
索引：4，
id:“黄色”，
css_类：“黄色框”
}
],
}
}
});
应用程序安装（“应用程序”）
.container{
宽度：100%；
高度：自动；
填充：10px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：开始；
-ms-flex-align：开始；
对齐项目：开始；
}
.css--class--app.css--palete{
列表样式类型：无；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.css--class--app.css--palete li{
宽度：50px；
高度：50px；
背景色：#ccc；
边界半径：50%；
左边距：5px；
边框：1px实心#bbb；
}
.css--类--应用程序结果框{
宽度：100%；
高度：100px；
背景色：#18bf71；
边缘顶部：15px；
边界半径：5px；
边框底部：1px实心#ccc；
-webkit过渡：背景色0.5s；
过渡：背景色0.5s；
}
.css--class--app.red box{
背景：红色！重要；
}
.css--class--app.blue box{
背景：蓝色！重要；
}
.css--class--app.green box{
背景：绿色！重要；
}
.css--类--应用程序黄色框{
背景：黄色！重要；
}

CSS类应用程序



创建一个
activeClass
属性并将其绑定到结果框
class
。需要注意的一点是，您可以同时使用
class
和
：class
。两者都适用于：



data（）{
返回{
活动类：“”
}
}

单击后，更改
activeClass
：

@click=“activeClass=color.css\u class”

还将类绑定到按钮。总而言之：



您可能希望减少默认类的特殊性，否则会遇到一些问题