How can I add conditional style in Vue.js?

Question

I want to add a conditional style in my Component. My component is below:

    <site-pricing
        color="primary"
        currency="$"
        price="25"
        to="/purchase"
>
        <template v-slot:title>Complete</template>
        <template v-slot:desc>{{ $t('plans.completeDesc' )}}</template>
        <template v-slot:planSuffix>/ {{ $t('plans.oneTime' )}}</template>
        <template v-slot:features>
          <ul>
            <li>{{ $t('plans.xchats', [ 200 ] )}}</li>
            <li>{{ $t('plans.sDomain' )}}</li>
          </ul>
        </template>
        <template v-slot:footer>{{ $t('plans.oneTime' )}}</template>
</site-pricing>

I want to add a special style just like, if 'color = primary', then add a border-top: 5px red...

For example you need add to site-pricing component prop "color". After, depending on what you needs to do, switch class with styles — N1Creator
– N1Creator, Commented Nov 19, 2019 at 7:28
Yes, my component, props and slots are working fine. I will use this component multiple times, with different theme colors. I have a 'color' prop. If color = primary just do something... if color = secondary just do something else.. — Ramazan Erikli
– Ramazan Erikli, Commented Nov 19, 2019 at 7:42

Daniyal Lukmanov · Accepted Answer · 2022-10-13 07:11:41Z

4

You should use the conditional style binding for vue. I'll show an example:

new Vue({
  el: '#app',
  data: {
    color: "secondary"
  },
  methods: {
    toggleColor(val) {
      this.color = val
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="[color==='primary' ? {color: 'red'} : {color: 'blue'}]">Primary</div>
<div :style="[color==='secondary' ? {color: 'red'} : {color: 'blue'}]">Secondary</div>
<button @click="(e) => toggleColor('primary')">Switch to pirmary</button>
<button @click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>

edited Oct 13, 2022 at 7:11

answered Nov 19, 2019 at 7:50

Daniyal Lukmanov

1,22912 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I add conditional style in Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related