如何基于API响应将样式应用于特定元素？
如何基于API响应将样式应用于特定元素？
提问于 2022-04-11 20:21:38
现在我的两个选择都被选中了。我正在寻找一种最好的方法，只突出显示基于API响应的一个。现在，type = marketing。应选择右侧。我有更多的时间来做这件事。
我会通过Ajax通过addClass通过jQuery，但我不知道如何通过Vue.js做到这一点。
谁能给点提示吗？
<v-row class="mb-6">
<v-col md="6">
<v-card outlined tile class="selection product" @click="selectCampaign('Product')">
<v-row>
<v-col md="1">
<v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
<v-icon>qr_code_scanner</v-icon>
</v-btn>
</v-col>
<v-col md="10">
<v-card-title outlined tile> Product </v-card-title>
<v-card-subtitle outlined tile>
Create campaigns for products with existing QR Codes.
</v-card-subtitle>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col md="6">
<v-card outlined tile class="selection marketing" @click="selectCampaign('Marketing')">
<v-row>
<v-col md="1">
<v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
<v-icon>qr_code_2</v-icon>
</v-btn>
</v-col>
<v-col md="10">
<v-card-title outlined tile> Marketing </v-card-title>
<v-card-subtitle outlined tile>
Create campaigns and download QR Codes for marketing materials.
</v-card-subtitle>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>CSS
.selection:not(.on-hover) {
opacity: 0.9;
}
.marketing {
opacity: 1;
border: 3px solid #26a69a;
background-color: #26a69a20;
}
.product {
opacity: 1;
border: 3px solid #e91e63;
background-color: #e91e6320;
}回答 1
Stack Overflow用户
发布于 2022-04-12 07:17:22
如果我正确理解您的需求，您希望根据API响应动态地进行卡片选择。如果是，您可以通过类绑定来操作元素的类。
根据我的理解，我创建了下面的代码片段。请告诉我是否有任何进一步的变化，根据要求。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selection: null
}),
mounted() {
// API response
this.selection = {
product: false,
marketing: true
}
},
}).marketing {
opacity: 1 !important;
border: 3px solid #26a69a !important;
background-color: #26a69a20 !important;
}
.product {
opacity: 1 !important;
border: 3px solid #e91e63 !important;
background-color: #e91e6320 !important;
}<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-card :class="{ product: selection.product }">
<v-card-title outlined tile> Product </v-card-title>
<v-card-subtitle outlined tile>
Create campaigns for products with existing QR Codes.
</v-card-subtitle>
</v-card>
<br>
<v-card :class="{ marketing: selection.marketing }">
<v-card-title outlined tile> Marketing </v-card-title>
<v-card-subtitle outlined tile>
Create campaigns and download QR Codes for marketing materials.
</v-card-subtitle>
</v-card>
</v-app>
</div>
注意：，我在样式中添加了!important，因为我们正在重写卡片的默认样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71833852
复制相关文章
相似问题
腾讯云开发者
