样式绑定

通过动态绑定class和style，可实现动态的样式

1.class样式

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

注意：class前一定要加:动态绑定

1.字符串

<template>
	<h1 :class="'bgRed'">class绑定单个类名</h1>
</template>

<style>
    .bgRed{color:red}
</style>

也可以绑定data中的数据

<template>
	<h1 :class="'classStr'">class绑定单个类名</h1>
</template>

<script>
export default {
   data(){
       return{
           classStr:'bgRed'
       }
   }
}
</script>

<style>
    .bgRed{color:red}
</style>

2.对象

class绑定的值是个对象时，对象中每个键都是类名，其值类型为Boolean，用来确定此类名是否使用

<template>
    <h1 :class="classObj">class绑定多个类名-对象写法</h1>  
</template>

<script>
    export default {
        data(){
            return{
                classObj:{
                    bgBlue:true,
                    fontRed:true
                }
            }
        }
    }
</script>

<style>
    .bgBlue { background: blue;}
    .fontRed {color: red;}
</style>

3.数组

class绑定的值是个数组时，数组中的每个值都是类名

<template>
    <h1 :class="classArr">class绑定多个类名-数组写法</h1>

</template>

<script>
    export default {
        data(){
            return{
                classArr:['bgGreen','fontRed']
            }
        }
    }
</script>

<style>
    .bgBlue { background: blue;}
    .fontRed {color: red;}
</style>

2.style样式

:style="xxx"，xxx可以是数组、对象

注意：style前一定要加:动态绑定

1.数组写法

• 数组的每个值是对象
• 对象的键为css属性，值为css属性值

<template>
    <h1 :style="styleArr">style绑定模型数据（数组语法）</h1>
</template>

<script>
    export default {
        data(){
            return{
                styleArr:[
                    {background:"red",color:"blue"},
                    {fontSize:"50px"}
                ]
            }
        }
    }
</script>

<style>
    .bgBlue { background: blue;}
    .fontRed {color: red;}
</style>

2.对象写法

• 对象的键是css属性名，值是css属性值

<template>
    <h1 :style="styleObj">style绑定模型数据（对象语法）</h1>
</template>

<script>
    export default {
        data(){
            return{
                styleObj:{
                    background:"red",
                    fontSize:"20pz"
                }
            }
        }
    }
</script>

<style>
    .bgBlue { background: blue;}
    .fontRed {color: red;}
</style>

对象写法为了方便也可以写成行内样式

<template>
    <h1 :style="{
                color:Fontcolor
                }">style绑定模型数据（对象语法）</h1>
</template>

<script>
    export default {
        data(){
            return{
              Fontcolor:'red'
            }
        }
    }
</script>