Vue3.x系列-绑定html样式(class)
<style>
[v-cloak]{
display: none;
}
.outside{
width:200px;
height:100px;
border:1px solid red;
text-align: center;
}
.inside{
width:100px;
height:50px;
border:1px solid black;
margin:15% 25%;
}
.class1{
background: red;
font-size:20px;
text-align: center;
line-height: 100px;
}
.class2{
width:400px;
height:100px;
}
</style>
<body>
<div id="app">
<h2>数组语法1--静态类名方式</h2>
<p>使用数组绑定样式的方式，直接在数组中写上样式的类名</p>
<!-- v-bind:class="[class1,'class2']"
注意：如果不使用单引号包裹类名，其实代表的还是一个变量的名称，会出现错误信息
-->
<div class="static" v-bind:class="['class1','class2']">{{ message }}</div>
<h2>数组语法2--变量的方式</h2>
<p>以变量的方式定义样式，需要先定义这个变量</p>
<div class="static" v-bind:class="[class3,class4]">{{ message }}</div>
<h2>数组语法3--对象语法形式</h2>
<p>根据值的真假控制样式</p>
<div class="static"v-bind:class="[{class1:boole},'class2']">{{ message }}</div>
<br>
<h2>对象语法</h2>
<p>对象的属性为样式的类名，value则为true或者false，当值为true时显示样式。由于对象的属性可以带引号，也可以不带引号</p>
<div class="static" v-bind:class="{class1:boole1,'class2':boole2}">{{ message }}</div>
<p>将对象中的属性全部写在对象变量</p>
<div class="static" v-bind:class="objStyle">{{ message }}</div>
<p>绑定一个返回对象的计算属性</p>
<div class="static" v-bind:class="classObject">{{ message }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const vm = Vue.createApp({
data(){
return{
message:"Hello Vue",
class3:'class1',
class4:'class2',
boole:true,
boole1:true,
boole2:true,
objStyle:{
class1:true,
class2:true
}
}
}, // 计算属性
computed:{
classObject:function(){
return {
class1:this.boole1,
'class2':this.boole2
}
}
},//监听器
watch:{
},// 方法
methods:{
}
}).mount('#app')
</script>
</body>