Detailed explanation of the method of conditional application of CSS classes in Vue.js

Core points:

• In Vue.js, conditional application of CSS classes can be implemented by binding JavaScript objects to class attributes. The attributes of the object correspond to the CSS class name, and its value is a JavaScript expression, which determines whether to apply the class.
• Vue.js provides two syntaxes to create class bindings: object syntax and array syntax. Object syntax is more concise, while array syntax may make template code clearer. Which grammar to choose depends on personal preference.
• Vue.js supports multiple methods of conditional class binding, including using ternary operators, object syntax to bind multiple classes, using computed properties, combining static and binding classes, and conditional binding inline styles.

Sometimes the CSS class that needs to be changed at runtime. But when changing classes, it is sometimes best to apply style details conditionally. For example, suppose your view has a pager. Pagers are often used to navigate larger project sets. When navigating, it is helpful to the user to display the information on the current page. The project style is conditionally set according to the currently viewed page. In this case, the pager might look like this:

There are five pages in this example, only one page can be selected at a time. If you build this pager with Bootstrap, the selected page will apply a CSS class named active. This class is only required if the page is currently viewed. In other words, the CSS class needs to be applied conditionally. Fortunately, Vue provides a way to conditionally apply CSS classes to elements at runtime, which I will demonstrate in this article. To conditionally apply CSS classes at runtime, you can bind to a JavaScript object. To successfully complete this task, two steps must be completed. First, you must make sure that the CSS class is defined. Then, create the class binding in the template. I will explain these steps in detail in the rest of this article. active

Step 1: Define the CSS class

Suppose that the five page items displayed in the above image use the following HTML definition:

Note that each page in this code snippet has a list item element (the third list item element has a class

). As you can guess, this is a CSS class that you want to apply conditionally. To do this, you need to add a JavaScript object.

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

activeStep 2: Create a class binding

When creating class bindings in a template, there are two main options: use object syntax or use array syntax. I will show you how to use both methods in the rest of this article.

Binding using object syntax

To create class bindings using object syntax, JavaScript expressions must be used. The expressions we will use can be seen in the code related to this article. The relevant code is as follows:

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

Reduces the amount of code by using Vue's built-in v-for directive. This directive is used to render projects in a loop. The item in this example is the page itself. In addition to using the v-for command, you should also pay attention to the use of the v-bind command. The v-bind directive connects the class attribute of the element to the Vue instance. The Vue instance is defined as follows:

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

This Vue instance is very simple. The above data object contains a property named currentPage. If you revisit the HTML template defined above, you will notice that this property is being referenced. In fact, the JavaScript object associated with each class binding looks like this:

var app = new Vue({
  el: 'http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

This object defines two properties: page-item and active. It is worth noting that these are the two CSS class names discussed in step 1. In step 2, these two class references have become property names in the JavaScript object. The value associated with these property names is a JavaScript expression. If the expression evaluates to true values, the CSS class will be included. If the expression evaluates to false, will not contain the CSS class. With these rules in mind, let's look at each attribute. The value of the first property is page-item. This hardcoded value is used because the class true is always required. The second property page-item uses JavaScript expressions. When this expression is true, the active class is applied. This allows us to conditionally apply the active class according to the value of currentPage. Another way to conditionally apply the active class is to bind to an array. active

Binding using array syntax

Vue allows lists of CSS classes to be applied by binding to an array. If you want to use array syntax, the HTML displayed in step 1 will become:

{'page-item':true, 'active':(page === currentPage)}

Running version using array syntax. The only difference is that arrays are used on class bindings. This alternative requires the presence of two other properties in Vue's

object. These two properties are: data and pageItemClass. The updated Vue initialization code containing these properties is as follows: activeClass

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="[pageItemClass, (page === currentPage) ? activeClass : '']">
        <a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

As you can see, the size of the

object increases, but the code in the template is slightly more concise when using array syntax. The object syntax is more compact. The choice between object syntax and array syntax depends on personal preference. Both of these methods seem to make HTML templates more complicated. But, there is actually more to it here. In fact, we are separating the focus. We are creating a data-driven template. This makes the view easier to test and easier to maintain as the application grows. data

Summary

I hope this article will be helpful to you. If you want to learn more about Vue.js, you can check out other Vue content on SitePoint.

(The following is a pseudo-original creation of the FAQ part in the original text, maintaining the original meaning but rewritten the expression)

FAQs on the application of CSS classes in Vue.js conditional

How to use ternary operators for conditional class binding?

In Vue.js, ternary operators can be used for conditional class binding. This is a simple and efficient way to switch between two classes based on conditions. Examples are as follows:

<div :class="condition ? 'classA' : 'classB'"></div>

In this example, if the condition is true, classA is applied; if the condition is false, classB is applied. The condition can be any valid JavaScript expression.

How to conditionally bind multiple classes in Vue.js?

Vue.js allows conditional binding of multiple classes using object syntax. This is very useful when multiple classes need to be applied according to different conditions. Examples are as follows:

<div :class="{ 'classA': conditionA, 'classB': conditionB }"></div>

In this example, if conditionA is true, classA is applied; if conditionB is true, classB is applied. Both conditionA and conditionB can be any valid JavaScript expression.

Can you use computed attributes for conditional class binding in Vue.js?

Yes, conditional class binding can be used in Vue.js. Computing properties is useful when determining the logic of a class is complex. Examples are as follows:

<div :class="computedClass"></div>

In the Vue instance, define computedClass as a computed property:

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

In this example, the computedClass computed attribute will return the class name based on the complex logic defined therein.

How to combine static and bound classes in Vue.js?

In Vue.js, static classes and binding classes can be combined. This is very useful when you need to always apply a certain class, but you also need to apply other classes conditionally. Examples are as follows:

<div :class="['staticClass', { 'classA': conditionA, 'classB': conditionB }]"></div>

In this example, staticClass will always be applied, and classA and classB will be applied according to conditionA and conditionB respectively.

How to conditionally bind inline styles in Vue.js?

Vue.js allows conditional binding of inline styles using object syntax. This is useful when certain styles need to be applied according to conditions. Examples are as follows:

<div :style="{ color: conditionA ? 'red' : 'blue', fontSize: conditionB ? '12px' : '16px' }"></div>

In this example, if conditionA is true, the color is red, and if conditionA is false, the color is blue. Similarly, if conditionB is true, the font size is 12px; if conditionB is false, the font size is 16px.

The above is the detailed content of How to Conditionally Apply a CSS Class in Vue.js. For more information, please follow other related articles on the PHP Chinese website!