一、Vue组件的样式绑定
1、为Html标签绑定class属性:v-bind,为class属性绑定一个对象,在对象中可以设置对象是否可用
1.1、绑定class属性,由绑定的变量来决定应用哪个样式
1.2、可以将样式直接设置成Vue组件中的数据对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
.font{
font-size: 30px;
}
</style>
<body>
<div id="app">
<div v-bind:class="{blue:isblue,red:isred}">
西安
</div>
<div v-bind:class="[greenClass,fontClass]">
郑州
</div>
<div :class="style">
武汉
</div>
</div>
<script>
const obj={
data(){
return{
style:{
blue:true,
red:false
},
isblue:true,
isred:false,
greenClass:'green',
fontClass:'font',
textColor:'red',
textFont:'35px'
}
}
}
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>
注意:v-bind可以缩写为:
<div :class=""></div>
2、绑定内联样式
<div :style=""></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
.blue{
color: blue