2.13. Vue3 style binding

发布时间 ： 2025-10-25 13:33:36 UTC      

Page Views: 9 views

2.13.1. Vue.js Class

class and style are attributes of the HTML element, which is used to style the element, and we can use the v-bind to set style properties.

v-bind Dealing with class and style the expression can be an object or an array in addition to a string.

v-bind:class can be abbreviated as :class .

2.13.2. class property binding

We can do it for v-bind:class set an object to switch dynamically class :

Example 1

In the instance, the general isActive set to true shows a green one. div block, if set to false does not display:

<div:class="{ 'active': isActive }">div>    
 The above examples   div   class   the rendering result is: 
 
 
 
<div class="active">div>    
 We can also pass in more properties in the object to dynamically switch between multiple   class   . 
 
 In addition   :class   instructions can also be similar to ordinary   class   properties coexist. 
  
 
 Example 2  
 
   text-danger   Class background color overrides the   active   class background color: 
 
 
 
<divclass="static":class="{ 'active' : isActive, 'text-danger' : hasError }"> 
 
 
 
<p>  The above examples  <code class="docutils literal notranslate">  <span class="pre">  div  </span>  <span class="pre">  class  </span>  </code>  the rendering result is: </p> <div class="highlight-default notranslate">  <div class="highlight">  <pre><span></span><span class="o"><</span><span class="n">div</span> <span class="n">class</span><span class="o">=</span><span class="s2">"static text-danger"</span><span class="o">></</span><span class="n">div</span><span class="o">></span> 
 
   
 Image0 
 
 When the   isActive   or   hasError   changes, the   class   attribute value will also be updated accordingly. For example, if the value of   active   is   true   , the   class   list will become “static active text-danger”. 
 
 We can also bind an object in the data directly: 
 
 
 
 
 Example 3  
 
   text-danger   Class background color overrides the   active   class background color: 
 
 
 
<divid="app"><divclass="static":class="classObject">div>div>    
 The rendering of instance 3 is the same as that of instance 2. 
 
 In addition, we can bind a computational property of the returned object here. This is a common and powerful model: 
  
 
 Example 4  
 
 
 
data(){return{isActive:true,error:null}},computed:{classObject(){return{active:this.isActive&& !this.error,'text-danger':this.error&&this.error.type==='fatal'}}} 
 
 
 
 
 
 
 
  2.13.3.  Array syntax  
 
 We can pass an array to   v-bind:class   the example is as follows: 
 
 
 Example 5  
 
 
 
<divclass="static":class="[activeClass, errorClass]">div>    
 The above examples   div   class   the rendering result is: 
 
 
 
<div class="static active text-danger">div>    
 We can also use ternary expressions to switch between the   class   : 
  
 
 Example 6  
 
   errorClass   is always there.   isActive   for   true   add when   activeClass   class: 
 
 
 
<divid="app"><divclass="static":class="[isActive ? activeClass : '', errorClass]"> 
 
 
 
 The above examples   div   class   the rendering result is: 
 
 
 
<div class="static text-danger">div>      
 
  2.13.4.    Vue.js   style (inline style)  
 
 We can do it in   v-bind:style   set the style directly, which can be abbreviated to   :style   : 
 
 
 Example 7  
 
 
 
<divid="app"><div:style="{ color: activeColor, fontSize: fontSize + 'px' }">Rookie Tutorial 
 
 
 
 The above examples   div   style   the rendering result is: 
 
 
 
<div style="color: red; font-size: 30px;">Rookie Tutorialdiv>    
 Image1 
 
 You can also bind directly to a style object to make the template clearer: 
  
 
 Example 8  
 
 
 
<divid="app"><div:style="styleObject">Rookie Tutorialdiv>div>    
   v-bind:style   can use an array to apply multiple style objects to an element: 
  
 
 Example 9  
 
 
 
<divid="app"><div:style="[baseStyles, overridingStyles]">Rookie Tutorial 
 
 
 
 Note: When using CSS attributes that require a specific prefix, such as   transform   and   Vue.js   , the   v-bind:style   will automatically detect and add the corresponding prefix.”. 
 
  
 
  2.13.5.  Multiple value  
 
 Can be used for   style   in binding   property   provides an array of multiple values, often used to provide multiple prefixed values, such as: 
 
 
 
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">div>    
 Writing in this way only renders the last value in the array supported by the browser. In this example, if the browser supports a   flexbox   then itwill only render   display:   flex   . 
  
 
  2.13.6.  Used on the component   class   attribute  
 
 When you use on a custom component with a single root element   class   property, these   class   will be added to the element. Existing on this element   class   will not be overwritten. 
 
 
 Example 10  
 
 
 
<divid="app"><runoobclass="classC classD">runoob>div><script>// Create a Vue application const app=Vue. createApp ({})//Define a name called The new global component of runoob app.component('runoob', { template: ' classB">I like runoob!' }) app.mount('#app')    
 The above examples   div   class   the rendering result is: 
 
 
 
I like runoob!
 
 
 
 
 Image2 
 
 For with data binding   class   the same applies: 
 
 
 
<my-component :class="{ active: isActive }">my-component>    
 When   isActive   for   true   the HTML is rendered as: 
 
 
 
<p class="active">Hip>    
 If your component has multiple root elements, you need to define which parts will receive this class. Can be used   $attrs   the component property does this: 
  
 
 Example 11  
 
 
 
    
 Note:   template   is a backquotation mark, not a single quotation mark. 
 
 The above examples   div   class   the rendering result is: 
 
 
 
I like runoob!
This is a subcomponent
 
 
 
 
 Image3 
   
 

                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            2.13. Vue3 style binding 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289