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
本文来自博客园,作者:怪圣卡杰,转载请注明原文链接:https://www.cnblogs.com/dwdw/p/16770569.html