vue中绑定class样式和条件渲染

绑定class样式

• 字符串写法： 适用于： 样式的类名不确定，需要动态指定

• 数组写法： 适用于： 要绑定的样式个数不确定，名字也不确定

• 绑定对象：适用于：要绑定的样式个数确定、名字确定、但动态决定决定用不用

• 
      .normal{}
      .happy{}
      .sad{}
  
  
      //basic和class都是css修饰，而:class="mood"则是动态的随data中的mood改变而改变
      //字符串写法
      
  
          {{name}}
      
      /*数组写法
      
  
          {{name}}
      
      */
       /*对象写法
      
  
          {{name}}
      
      */
  
  

• 绑定style

• 第一种style绑定方法

• 
      
      {fontSize：size + 'px'}的原型是font-size: 10px,直接用css格式vue不承认
      
  {{name}}
  
  
  第二种style绑定方法
  
  
      
  {{name}}
  
  

条件渲染

• v-show做条件渲染

• v-show="true"将页面的数据显示，v-show="false"只是用css将数据隐藏起来。也就是display: none;

• v-if="true"也是将页面数据进行显示，v-if="false" 直接将页面的数据删除

• v-if与v-else-if要挨着写中间不可添加任何标签,如< div>@

• 
      
  
          
  当前的n值为：{{n}}
          点我n+1
          /*使用v-show做条件渲染
          
  {{name}}
          
  {{name}}
          v-if做条件渲染
          
  {{name}}
          
  {{name}}
          //v-if和v-else-if，当v-if条件成立时，直接跳出v-else-if和v-else判断
          
  {{苹果}}
          /*
  @
  */
          
  {{栗子}}
          
  {{榴念}}
          
  {{榴念}}
          
          */
        
      
  
  

  • 当重复出现相同的条件时可以用div标签统一实现

  • template标签相对于div标签，template不会影响DOM(页面)的格式

  • 
        
    
             
    {{栗子}}
             
    {{榴念}}
             
    {{梨子}}
        
        /*
        
        */