What is the best way to implement conditional styling in Vue.js?

Looking to incorporate a conditional style into my Component. Here is my component:

    <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 am aiming to implement an unique styling - if 'color = primary', then include a border-top: 5px red...

Answer №1

If you want to incorporate conditional style binding in Vue, here's an example for you:

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 primary</button>
<button @click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Following an AJAX request, jQuery.each() does not have access to the newly loaded CSS selectors

Note: While I value the opinions of others, I don't believe this issue is a duplicate based on the provided link. I have searched for a solution but have not found one that addresses my specific problem. Objective: Load HTML content to an element u ...

Maintain the current Vuetify page when there are changes made to the items

Is there a way to maintain the current page in data tables within vuetify when the items are changed? For example, if the current page is 2 and a new item is added to the items, how can we ensure that the current page remains at 2? Check out this Codepen ...

How to dynamically add a CSS class in Vue JS using v-for and v-if conditions

Vue JS: new Vue({ el: '#app', data: { results: { device: [{ deviceName: "", info: [{value: ""}] }] } index.html: <tr v-for="device in results.device" > <td>{{device.deviceName}}</a> ...

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

What is the best way to send custom props to a Vue component through a function?

How can I successfully pass the boolean value isReadonly from the first component to the second one? It doesn't seem to be working as expected. Edit made following cafertayyar's response: The isReadonly method has been relocated from methods to ...

Storing API data in localStorage using VueJS: A step-by-step guide

As I work on practicing building a simple SPA with VueJS, one of my current tasks involves listening to an API and storing certain data in the browser's localStorage. However, my experience with VueJS is still limited, so I'm unsure about how to ...

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component. <div class="o-tile-container "> <div *ngFor="let country of Countrys"> <app-country [na ...

Tips for achieving a seamless user experience with Vue-bootstrap popovers

My Vue application consists of multiple cards, each displaying a button when hovered over. Additionally, hovering over the button triggers a popover to appear. However, I am experiencing issues with the popover behavior - it blinks when attempting to acces ...

Creating a full-width menu with Material UI - a step-by-step guide

I am currently working on creating a mobile menu that spans the full width of the screen. Despite my efforts, it seems like I might be misunderstanding something as my CSS rules are not being applied correctly. Here is a live code example for reference: ...

CSS - Problem with image display and hover functionality

I am facing an issue with hover effect on an image. The hover works fine but the original image remains visible above the hovered image. I have attempted to use z-index to fix this problem without success. Below is the CSS code: #login, #logout { fl ...

Utilize CSS to prioritize the image and ensure it is responsive

I'm utilizing the 'featurette' feature in bootstrap. Currently, the page displays text on the left and an image on the right. As you reduce the browser size, they stack on top of each other, with the text appearing above the image. How can I ...

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

How to disable a select list in HTML using vue.js when it is checked

I need assistance with a form that includes an "age" field. There are two possible scenarios: if the "unknown" box is checked, then the user should not be able to enter/select an age (the option should be disabled). If the box is unchecked, then the user s ...

ngInfiniteScroll Activates on Every Scroll Occurrence

Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...

Utilizing Vue.js to retrieve database information and populate input fields through select options

In my Laravel 8 and Vue 3 application, I have a Student Component with a datalist that lists all the students. My goal is to populate the input fields with the specific student information when clicking on a student. I attempted to use Vue select, which i ...

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why. <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail"& ...

What methods can we use to transform Bootstrap rows and columns to resemble a table design?

Attempt number one did not work due to padding issues in the columns. Attempt number two also failed, leading me to believe I may be making a mistake somewhere. This is what I am aiming for: https://i.sstatic.net/yTz6o.png Can anyone provide some assis ...

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...