The class that appears in this article is not a keyword in the class declaration, but an attribute inside the tag that is used to implement the style. In native HTML, when we add a style to an element, there are roughly two ways. You can also follow my wechat public number, Snail Quanzhan.

<! DOCTYPEhtml>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">    
    <title>Document</title>
</head>
<body>    
    <div style="color:red">I am a little red cutie</div>
</body>
</html>
Copy the code

The second way is to add a style tag between the head tags, write the style between the styles, and then define the corresponding class in the tag

<! DOCTYPEhtml>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">    
    <title>Document</title>    
    <style>        
        .red_color{            
            color:red        
        }
    </style>
</head>
<body>    
<div class="red_color">I am also a little red cutie</div>
</body>
</html>
Copy the code

For Vue, there are four ways to define styles and classes. First, bind strings using the V-bind method provided by Vue, like this

<html>  
<head>    
    <style>      
        .red_color{        
            color:red      
       }      
       
   .green_color{        
       color:green      
   }      
   .yellow_color{        
       color:yellow      
   }    
</style>  
</head>  
<body>    
<script>      
    const app = Vue.createApp({          
        data(){              
            return {                  
                classString:'red_color'}},template: `<div :class="classString">Hello World</div>`      
        })      
        const vm = app.mount('#root')    
    </script>  
</body>
</html>
Copy the code

The resulting DOM looks like this

<div class="red_color">Hello World</div>
Copy the code

If the class key is true and the value is Boolean, add the class. If the class key is true, add the class

<html>  
<head>    
<style>      
    .red_color{        
        color:red      
    }      
    .green_color{        
        color:green      
    }      
    .yellow_color{        
        color:yellow      
    }
</style>  
</head>  
<body>    
<script>      
    const app = Vue.createApp({          
        data(){              
            return {                  
                classObj: {red_color: true.green_color: true.yellow_color: false}}},template: `<div :class="classObj">Hello World</div>`      
    })      
    const vm = app.mount('#root')
</script>  
</body>
</html>
Copy the code

The resulting DOM looks like this

<div class="red_color green_color">Hello World</div>
Copy the code

Class can also be an Array. The elements in an Array can also be an Object, but the rules for this Object are the same

<html>  
<head>    
<style>      
    .red_color{        
        color:red      
    }      
    .green_color{        
        color:green      
    }      
    .yellow_color{        
        color:yellow      
    }
</style>  
</head>  
<body>    
<script>      
    const app = Vue.createApp({          
        data(){              
            return {                  
                classArray: ['red_color'.'green_color', {yellow_color: true}}},template: `<div :class="classArray">Hello World</div>`      
    })      
    const vm = app.mount('#root')
</script>  
</body>
</html>
Copy the code

The resulting DOM looks like this

<div class="red_color green_color yellow_color">Hello World</div>
Copy the code

Fourth, you can also bind style

<html>  
<body>    
<script>      
    const app = Vue.createApp({          
        data(){              
            return {                  
                styleObj: {color:'yellow'}}},template: `<div :style="styleObj">Hello World</div>`      
    })      
    const vm = app.mount('#root')
</script>  
</body>
</html>
Copy the code

Finally, of course, apply colours to a drawing gives yellow element in the page Described above are not involved in the component, if the page has components and would be like For a component in the style, so two cases, one is a child component of the outermost element package, only one is can pass down along the parent component, is also the corresponding class to child components inside, Or it can be applied directly to the child components of the parent page

<html>  
<head>    
<style>      
    .red_color{        
        color:red      
    }      
    .green_color{        
        color:green      
    }      
    .yellow_color{        
        color:yellow      
    }
</style>  
</head>  
<body>    
<script>      
    const app = Vue.createApp({          
        data(){             
            return{}},template: `<div>Hello World<demo class="green_color" /></div>`      
    })      
    app.component('demo', {It is also possible to assign a class to a component when there is only one outermost element
    template:`<div>single</div>`      
})      
const vm = app.mount('#root')
</script>  
</body>
</html>
Copy the code

In the code above, passing a class to a child component on the parent page has the same effect as adding a class directly to the child component, and the DOM rendered is the same

<div>Hello World
    <div class="green_color">        
        single    
    </div>
</div>
Copy the code

But you can’t “pass down” when a child component is wrapped in more than just the outermost element, which you can do if you want to get classes registered in the component as well

<html>  
<head>    
<style>      
    .red_color{        
        color:red      
    }      
    .green_color{        
        color:green      
    }      
    .yellow_color{        
        color:yellow      
    }
</style>  
</head>  
<body>    
<script>      
const app = Vue.createApp({          
    data(){             
        return{}},template: `<div>Hello World<demo class="green_color" /></div>`      
})      
app.component('demo', {It is also possible to assign a class to a component when there is only one outermost element
template:`<div :class="$attrs.class">one</div><div>two</div>`      
})      
    const vm = app.mount('#root')
</script>  
</body>
</html>
Copy the code

Another day of front-end progress, come on!