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

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

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

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

子组件的样式绑定

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

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

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

app.component('sonCom',{
    template:`
        <div :class="$attrs.class">SonCom</div>
        <div>子组件</div> 
    `
})

行内样式编写

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