How to make styles in .vue file disable/enable by condition?

Question

Vue.js

Good afternoon. There is a task to make styles of components disconnected. For example, we pass is_stylized: false to props, and styles should not be applied. Roughly speaking, to work something like:

<style lang="scss" scoped v-if="is_stylized"></style>

But of course, that doesn't work. How do you make sure that this is exactly what happens? Maybe not through props, but somehow...

Answer 1

Well, make a class by condition from props. What the fuck are you suffering

<template>
  <div
    :class="{
      myClass: isStylized
    }"
  >

  <div>
</template>

<script>
  export default {
    props: {
      isStylized: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

Answer 2

Full article on the official resource how to work with it
Working with classes and styles