我在 Vueity 卡上设置了一个名为 editMode
的数据属性。当我单击按钮时,editMode
设置为 true,并且 v-img
上会显示一个图标。现在,如何才能使当 editMode
为 true 时,图像的 opacity
设置为 0.3
但图标不受影响?
这是工作 codepen
请检查以下代码:-
new Vue({
el: "#app",
data() {
return {
editMode: false
};
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire" dark>
<v-container>
<v-layout>
<v-flex xs6>
<v-card>
<v-img :style="editMode ? 'opacity: 0.3' : ''" src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
<v-container v-if="editMode">
<v-layout align-center justify-center row fill-height>
<v-icon class="mt-5" color="white" large>create</v-icon>
</v-layout>
</v-container>
</v-img>
</v-card>
<v-btn large @click="editMode = !editMode"> Edit Mode </v-btn>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
现在图标的不透明度也变为 0.3。任何帮助将不胜感激。谢谢。
最佳答案
这是我的解决方案:使用类而不是样式:
<v-img :class="{'editMode': editMode}" src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
以及样式:
<style lang="scss" scoped>
.editMode {
::v-deep .v-image__image {
opacity: .3
}
}
</style>
关于javascript - VueJS 动态样式绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61536125/