在vue中使用样式
2019-07-21 本文已影响0人
小透明进击战
直接使用数组
- 样式表
<style>
.font {
font-family: 'Trebuchet MS',, 'Lucida Sans', Arial, sans-serif;
color: wheat;
}
.italic {
font-style: italic
}
</style>
- html和js
<body>
<div id="app">
<h1 v-bind:class="['font','italic']">111</h1>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
}
});
</script>
</body>
在数组中使用三元表达式
<h1 v-bind:class="['font',flag?'italic':'']">111</h1>
在数组中使用对象
<h1 v-bind:class="['font',{'italic':flag}]">111</h1>
使用对象的形式
<h1 v-bind:class="{'font':true,'italic':false}">111</h1>
如果对象的内容太长，可以将对象内容写入vue实例中的data变量中在v-bind:class='变量'
