Javascript Vue.js条件模块样式
我想在模块中分离Vue.js组件中的样式。 每个样式模块将远远不止一个类,并且将定期添加新类。因此,很难更改整个组件的模板。所以,我在寻找一个更实际的解决方案 我的想法是,在样式中使用v-if,但不确定它应该如何实现,或者这样的事情是否可能 这将是更实际的方式,如果只是根据与道具发送的名称,整个风格的变化Javascript Vue.js条件模块样式,javascript,css,vue.js,vuejs2,Javascript,Css,Vue.js,Vuejs2,我想在模块中分离Vue.js组件中的样式。 每个样式模块将远远不止一个类,并且将定期添加新类。因此,很难更改整个组件的模板。所以,我在寻找一个更实际的解决方案 我的想法是,在样式中使用v-if,但不确定它应该如何实现,或者这样的事情是否可能 这将是更实际的方式,如果只是根据与道具发送的名称,整个风格的变化 <template> <div class="color-text"> Text in the color of the class with just t
<template>
<div class="color-text">
Text in the color of the class with just the name
</div>
</template>
<script>
export default {
name: 'comp',
props: ['name']
}
</script>
<!-- General styles -->
<style scoped>
div{
float: right;
}
</style>
<!-- red styles -->
<style module v-if="name === 'red'">
.color-text{
color: red;
}
</style>
<!-- blue styles -->
<style module v-if="name === 'blue'">
.color-text{
color: blue;
}
</style>
<!-- green styles -->
<style module v-if="name === 'green'">
.color-text{
color: green;
}
</style>
如果我要解决这个问题,我会使用一个可传递的类值。不用担心道具
<template>
<div class="color-text">
Text in the color of the class with just the name
</div>
</template>
<script>
export default {
name: 'comp'
}
</script>
<!-- General styles -->
<style scoped>
div{
float: right;
}
.red .color-text{
color: red;
}
.blue .color-text{
color: blue;
}
.green .color-text{
color: green;
}
</style>
然后可以使用class属性传入颜色类型
<div id="app">
<comp class="red"></comp>
<comp class="green"></comp>
<comp class="blue"></comp>
</div>
我举了一个例子,但在涉及范围样式和webpack如何处理注入时可能需要一些调整