Details on how to use class styles in Vue

1. Boolean
2. Expression
3. Multi-class packaging
4. You can use the class class directly in v-bind:

Vue provides us with several ways to use the class style

1. Boolean

Let's first write a style with a class name of active in the style tag.

<style>
        .active{
            color: red;
            font-size: 20px;
            font-style: normal;
        }
    </style>

Create a vm instance in our script tag and write isActive:true in the data center of the instance.

true means use this style, false means do not use it

<script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isActive:true
             }
       </script>

At this point we have used class class in the v-bind directive in the tag

<div id="app">
        <h1 :class="{active:isActive}">I am using Boolean value to reference class style</h1>
    </div>

View the output:

Now we change true to false:

data:{
   isActive: false
}

View the output:

2. Expression

We can add an expression after the v-bind: directive and call the class when the condition is met.

For example, we have an array of objects in the data center data , and render it to the view layer. I want to make the references with even indexes

Class style:

<body>
    
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">{
<!-- -->{index}}----{
<!-- -->{item.name}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"Jinx"},
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"},
                    {id:4,name:"蔚"},
                ]
            }
        })
    </script>

Use attribute binding class style in li:

<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
        {
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>

The output is:

We can also define a mark in the data center and define the value of mark to allow a row to reference the class class separately.

<li v-for="(item,index) in list" :class="{active: index === mark}">
        {
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>

let vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"Jinx"},
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"},
                    {id:4,name:"蔚"},
                ],
                mark:0
            }
        })

At this point only the style with index 0 is referenced, i.e. the first one:

3. Multi-class packaging

Multiple classes can be directly encapsulated into objects, and the object name can be directly called in the view layer!

Multiple classes can be placed in an object. In the view layer, it is an object name. In the data center, it is an object that lists multiple classes.

<style>
        .f50{
            font-size: 50px;
        }
        .blue{
            color: blue;
        }
        .background{
            background-color: black;
        }
    </style>
<body>
 
   <div id="app">
         <p :class="classObject">Chinese</p>
    </div>
</body>

let vm = new Vue({
            el:"#app",
            data:{
                classObject:{
                    "f50":true,
                    "blue":true,
                    "background":true
                }
            }
        })

The output is:

You can also customize the calculated properties, encapsulate them in a function, and return the call

let vm = new Vue({
            el:"#app",
            computed:{
         // 1. Custom calculated property name,
         // 2. What the calculated attribute does, we encapsulate it into the function myclass(){
                    return {
                        "f50":true,
                        "blue":true,
                        "background":true
                    }
                }
            }
        })

<p :class="myclass">Chinese</p>

The output is consistent

4. You can use the class class directly in v-bind:

.f50{
            font-size: 50px;
        }
        .blue{
            color: blue;
        }
        .background{
            background-color: black;
        }

<!-- Note that the class name must be quoted-->
        <p :class="['f50','blue','background']">Week after week</p>

Output:

This is the end of this article about the details of how to use class styles in Vue. For more information about how to use class styles in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: