Vue3.0学习笔记-样式绑定

通过在data的数据项中定义变量绑定

• 通过普通字符串进行绑定；
• 通过对象的方式进行绑定；
• 通过数组的方式进行绑定， true为使用。

data(){
    return {
        classString:'red', //字符串方式也可以定义多个样式
        classObject:{red:true,background:true},
        classArray:['green','background'],
    }
},
template:`
    
样式绑定
  

子组件的样式绑定

方法一：对组件绑定样式，只会作用于组件最外层的一个根标签。（如果组件有两个根标签，则无效）

方法二：组件内标签通过 $attrs.class 绑定父组件传入的class

方法三：定义 props， 组件内标签通过绑定父组件传入的属性

app.component('sonCom',{
    template:`
        
SonCom
        
子组件
 
    `
})

行内样式编写

方法一：直接在模板dom style中写行内样式

方法二：data数据项中通过普通字符串、对象、数组定义样式，通过dom style绑定

data(){
    return{
       //.....
        styleString:'color:orange;',
        styleObject:{
            color:'red',
            background:'yellow'
        }，
        styleArray: ['color:red', 'background-color: green']
    }
},

template:`
        Dom行内样式
        普通字符串绑定行内样式
        对象绑定行内样式
        数组象绑定行内样式
`

 

Demo14.html




    
    
    
    
    



    

        
通过在data的数据项中定义变量绑定
        
通过普通字符串进行绑定；
        
通过对象的方式进行绑定；
        
通过数组的方式进行绑定， true为使用。
        

        
子组件的样式绑定
        
方法一：对组件绑定样式，只会作用于组件最外层的一个根标签。（如果组件有两个根标签，则无效）
        
方法二：组件内标签通过 $attrs.class 绑定父组件传入的class
        
方法三：定义 props， 组件内标签通过绑定父组件传入的属性
        

        
行内样式编写
        
方法一：直接在模板dom style中写行内样式
        
方法二：data数据项中通过普通字符串、对象、数组定义样式，通过dom style绑定