class的使用
<body>
<script src="../libs/vue.js"></script>
<div id="app">
<!--普通用法-->
<h2 :class="color">红色字体</h2>
<!--对象语法 控制多个样式-->
<!--v-bind:class 可以与普通的 class 共存-->
<h2 :class="{active: isActive}" class="red">对象语法的红色字体</h2>
<!--数组语法-->
<h2 :class="['red','active']">数组语法的红色字体</h2>
<!--可以用三元达表式-->
<h2 :class="[isRed?'red':'green']">三元表达式的字体</h2>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
color: 'red',
isRed: true,
isActive: true
},
})
</script>
<style>
.red {
color: red;
font-family: 华文彩云;
}
.green {
color: green;
font-family: 华文彩云;
}
.active {
background: green;
}
</style>
</body>
style的使用
<body>
<script src="../libs/vue.js"></script>
<div id="app">
<!--style的优先级高与class-->
<h2 style="color: green" class="red"> hello Vue </h2>
<!--普通style的语法-->
<h2 :style="colorRed"> hello Vue </h2>
<!--对象语法-->
<h3 :style="{color:activColor,fontSize:fontsize+'px'}"> 对象语法</h3>
<!--数组语法-->
<h3 :style="[color,font]">数组语法</h3>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isRed: true,
colorRed: 'color: green',
activColor: 'red',
fontsize: 40,
color: {
color: 'red'
},
font: {
fontSize: '40px'
}
}
})
</script>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
</body>
