How to bind style class in Vuejs

An ideal vue component may consist of three sections as in angular, template, Script, Style. We can bind styles according to some rules ( truthiness).

In the following example we place two different colors for text area border.

<style scoped>
.text-safe {
  border-color: green;
  color: black;
}

.text-not-safe {
  border-color: crimson;
  color: black;
}
</style>

In the textarea we conditionally render the style as follows

 <textarea
            :class="{
              'text-safe': getTweetQuota > 50
            }"
            placeholder="tweet text here"
            id="newTweet"
            rows="7"
            v-model="newTweetContent"
          />

Here the style text-safe is only enabled when the getTweetQuota value is greater than 50 otherwise the style class is get removed. We can also bind multiple style to a component as follows

 <textarea
            :class="{
              'text-safe': getTweetQuota > 50,
              'text-not-safe': getTweetQuota < 50,
            }"
            placeholder="tweet text here"
            id="newTweet"
            rows="7"
            v-model="newTweetContent"
          />

Todo:

Try to add different color to a button based on values in a Text input

The following vue post posts may help you

• How reactivity works in Vuejs - How to use reactive feature in Vuejs
• Create a desktop version of Quasar-Vue app using Electron - How to build desktop version of Quasar Vue app using Electron
• Create PolarArea chart component in Vue - How to Create a PolarArea Chart component in Vue using vue-chartjs module
• Create Radar component in Vue - How to Create a Radar Chart component in Vue using vue-chartjs module
• Create Horizontal Bar chart component in Vue - How to Create a HoruzotalBar Chart component in Vue using vue-chartjs module
• Create Scatter chart component in Vue - How to Create a scatter Chart component in Vue using vue-chartjs module
• Create Bubble chart component in Vue - How to Create a bubble Chart component in Vue using vue-chartjs module
• Quasar UI framework for Vue - About Quasar Vuejs UI framework and How to create and run Vuejs app with Quasar CLI tool
• Component with same name in Vuejs - How to dealing with component has same name in Vuejs
• Create Pie chart component in Vue - How to Create a Pie Chart component in Vue using vue-chartjs module