<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.active {
font-style: italic;
}
.default {
text-decoration: underline;
}
.size {
font-size: 18px;
}
.color {
color: #6699FF;
}
.line {
text-decoration: line-through;
}
.size {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<h2>一、class属性绑定</h2>
<h4>1、对象语法</h4>
<p>(1)内联绑定</p>
<div v-bind:class="{active: isActive}">Vue.js样式绑定</div>
<div>Vue.js样式绑定</div>
<p>(2)非内联绑定</p>
<div class="default" v-bind:class="classObject">Vue.js样式绑定</div>
<p>(3)使用计算属性返回样式对象</p>
<div class="default" v-bind:class="show1">Vue.js样式绑定</div>
<h4>2、数组语法</h4>
<p>(1)普通形式</p>
<div v-bind:class="[lineClass,sizeClass]">Vue.js样式绑定</div>
<p>(2)在数组中使用条件运算符</p>
<div v-bind:class="[isLine? 'line':'',sizeClass]">Vue.js样式绑定</div>
<p>(3)在数组中使用对象</p>
<div v-bind:class="[{line:isLine},sizeClass]">Vue.js样式绑定</div>
<h2>二、内联样式绑定</h2>
<h4>1、对象语法</h4>
<p>(1)内联绑定</p>
<div v-bind:style="{ 'font-weight': weight1, 'font-size': fontSize+'px' }">Vue.js样式绑定</div>
<p>(2)非内联绑定</p>
<div v-bind:style="styleObject">Vue.js样式绑定</div>
<p>(3)使用计算属性返回样式对象</p>
<div v-bind:style="show2">Vue.js样式绑定</div>
<h4>2、数组语法</h4>
<div v-bind:style="[{fontSize:'24px'},{'font-weight':'bold'},{'text-decoration':'underline'}]">Vue.js样式绑定</div>
<div v-bind:style="arrStyle">Vue.js样式绑定</div>
<div v-bind:style="[size,weight2,decoration]">Vue.js样式绑定</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isActive: true,
isSize: true,
isColor: true,
isLine: true,
lineClass: 'line',
sizeClass: 'size',
classObject: {
size: true,
color: true
},
weight1: 'bold',
fontSize: 30,
size: {fontSize:'24px'},
weight2: {'font-weight': 'bold'},
decoration: {'text-decoration': 'underline'},
styleObject: {
fontWeight: 'bold',
'font-size': '30px'
},
arrStyle:[
{fontSize: '24px'},
{'font-weight': 'bold'},
{'text-decoration': 'underline'}
]
},
computed: {
show1: function() {
return {
size: this.isSize,
color: this.isColor
}
},
show2: function() {
return {
fontWeight: this.weight1,
'font-size': this.fontSize+'px'
}
}
}
})
</script>
</body>
</html>