【Vue】零基础学习Vue: 第17课 Vue的v-bind指令使用与设置及改变标签样式

v-bind指令 给标签绑定vue中定义的属性 ： v-bind 缩写 ":"

通过缩写 " : "给标签绑定class属性名称：

  
  Document
  
  
    .bbb{
      width:200px;
      height:200px;
      background-color:red;
    }
    .ccc{
      width:200px;
      height:200px;
      border: 10px solid green;
    }
  


  

    
    
啦啦啦
  

  
    let vm = new Vue({
      el:"#app",
      data: {
        bbbobj:{
          bbb:true,
          ccc:true
        },
        //arr内的组员对应css样式中的class名
        arr:["bbb","ccc"]
      }
    })
  

运行结果如下：

还可以通过style属性直接设置属性：

  
  Document
  


  

    
    
啦啦啦
  

  
    let vm = new Vue({
      el:"#app",
      data: {
        aaa:{
          width:"200px",
          height:"200px",
          backgroundColor:"pink"
        }
      }
    })
  

运行结果如下：