5.绑定

1.class绑定

//class绑定：方式一
<template>
    <div :class="{beijing:true}">class绑定</div>
</template>
<style>
    .beijing{
        background:red
    }
</style>
//class绑定：方式二
<template>
    <div :class="beijing">class绑定</div>
</template>
<script>
    export default {
        data(){
            beijing:"ha" //给样式取名
        }
    }
< /script >
<style>
    .ha{
        background:red
    }
</style>

 

2.style绑定

//style绑定：方式一
<template>
    <div :style="{background:ha,color:di}">style绑定</div>
</template>
<script>
    export default {
        data(){
            ha:"yellow",
            di:"red"
        }
    }
</script>
//style绑定：方式二
<template>
    <div :style="beijing">style绑定</div>
</template>
<script>
    export default {
        data(){
            beijing:{
                background:"pink",
                color:"green"
            }
        }
    }
</script>