<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<style type="text/css">
.static {
font-weight: bold;
} .class-a {
color: blue;
} .class-b {
font-size: 22px;
}
</style>
</head>
<body>
<!--1.绑定 HTML Class-->
<!--对象语法-->
<div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div>
<!--数组语法-->
<div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div>
<div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div> <!--2.绑定内联样式-->
<!--对象语法-->
<div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div>
<div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div>
<!--数组语法-->
<div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
// example 1
let vm1 = new Vue({
el: '#example1',
data: {
isA: true,
isB: false
}
});
console.log(vm1.$el); // example 2
let vm2 = new Vue({
el: '#example2',
data: {
classA: 'class-a',
classB: 'class-b'
}
});
console.log(vm2.$el); // example 3
let vm3 = new Vue({
el: '#example3',
data: {
classA: 'class-a',
classB: 'class-b',
isB: false
}
});
console.log(vm3.$el); // example 4
let vm4 = new Vue({
el: '#example4',
data: {
activeColor: 'red',
fontSize: '30'
}
});
console.log(vm4.$el); // example 5
let vm5 = new Vue({
el: '#example5',
data: {
styleObject: {
color: 'red',
fontSize: '25px'
}
}
});
console.log(vm5.$el); // example 6
let vm6 = new Vue({
el: '#example6',
data: {
styleObjectA: {
color: 'blue',
fontSize: '35px'
},
styleObjectB: {
'text-decoration': 'underline'
}
}
});
console.log(vm6.$el);
</script>
</body>
</html>
结果：