Vue中使用样式
绑定css
- 数组
1 <style>
2 .red{
3 color:red
4 }
5 .thin{
6 font-size:18px
7 }
8 </style>
9 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<style>
.red{
color:red
}
.thin{
font-size:18px
}
</style>
<div id="app">
<h1 :class="['red', isactive?'thin':'']">这是一个邪恶的H1</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
isactive:false,
}
})
</script>
- 数组中嵌套对象
<style>
.red{
color:red
}
.thin{
font-size:18px
}
</style>
<div id="app">
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
isactive:false,
}
})
</script>
- 直接使用对象
<style>
.red{
color:red
}
.thin{
font-size:18px
}
</style>
<div id="app">
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
isactive:false,
}
})
</script>
使用内联样式
- 直接在元素上通过
:style
的形式,书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象,定义到
data
中,并直接引用到 :style
中
<div id="app">
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
})
</script>
- 在
:style
中通过数组,引用多个 data
上的样式对象
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
})
</script>
转载于:https://www.cnblogs.com/lyChengx/p/10267582.html