vue-4 CSS綁定/Style綁定
<template>
<div>
<div class="border-style">
<h1 :class="class3">-----------------CSS綁定-------------------</h1>
<div :class="{'c1':clEnable, 'c2':c2Enable}">CSS屬性綁定,注意疊加效果</div>
<div :class="calCss">CSS屬性綁定 使用計算屬性</div>
<div :class="[class3,class4]">CSS屬性綁定 數組語法</div>
<h1 :class="{'c1':c1Enable}">----------------Style綁定---------------</h1>
<div :style="{'color':c5,'font-size':c6+'px'}">Style屬性綁定</div>
<div :style="[c7,c8]">【數組語法】</div>
</div>
</div>
</template>
<script>
export default {
name: 'Css',
data() {
return {
c1Enable: true,
c2Enable: true,
class3: 'c3',
class4: 'c4',
c5: 'green',
c6: 25,
c7: {
'background-color': 'lightblue',
},
c8: {
color: 'yellow',
},
}
},
computed: {
calCss() {
return {
c1: true,
c2: true,
}
},
},
methods: {},
}
</script>
<style scoped>
.c1 {
color: red;
}
.c2 {
font-size: 40px;
}
.c3 {
color: blue;
}
.c4 {
font-size: 30px;
}
.border-style {
border-width: 2px;
border-style: solid;
border-color: yellow;
}
</style>
創作不易,轉摘請標明出處。如果有意一起探討測試相關技能可加博主QQ 771268289 博主微信:ding17121598
本文來自博客園,作者:怪圣卡杰,轉載請注明原文鏈接:http://www.rzrgm.cn/dwdw/p/16770569.html
浙公網安備 33010602011771號