1、绑定样式

• 写法：:class="xxx"，xxx可以是字符串、数组、对象

• :style="[a,b]"其中a、b是样式对象

• :style="{fontSize: xxx}"其中 xxx 是动态值
  字符串写法适用于：类名不确定，要动态获取
  数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
  对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

    
    
    
    
    
    
    


    
   
        
        
{{name}}
        



        
        
{{name}}




        
        
{{name}}





        
        
{{name}}



        
        
{{name}}

    

    

    

2、条件渲染

v-if

1. 写法跟if else语法类似
   v-if="表达式"
v-else-if="表达式"
v-else

2. 适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除

3. 注意：v-if可以和v-else-if v-else 一起使用，但要求结构不能被打断。

v-show

• 写法：v-show="表达式"
• 适用于：切换频率较高的场景
• 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉display: none

备注：使用v-if的时，元素可能无法获取到，而使用v-show 一定可以获取到

template标签不影响结构，页面html中不会有此标签，但只能配合v-if ,不能配合v-show使用。

    
    
    
    
    
    



    


        
        

         
         


         
         

         
         


          
         
当前n的值为：{{n}}
         点我

         
        

         
         
         

    

    

    

v-if的条件成立则不会对下面的v-else-if进行解析操作：