2019.4.21 vue.js day5vue中class样式的几种用法_vue中class修饰样式有几种方式分别都是什么。-CSDN博客

本文详细介绍了在Vue.js中使用不同方法进行样式绑定的技术细节，包括如何通过数组、对象及data属性灵活控制元素样式，展示了letter-spacing等CSS属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5rem;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--"这是原始的加class类的方法"-->
    <!--<h1 class="red thin">这是一个很大的h1，下面都是废话为了凑字数</h1>-->
    <!--"这是第二种方式，用数组的方法传入两个类，但是这个方法显然没有优势"-->
    <!--<h1 :class=['red','thin']>这是一个很大的h1，下面都是废话为了凑字数</h1>-->
    <!--"这是第三种非常优秀的方法，在data中可以操作样式"-->
    <!--<h1 :class=['red','thin',flag?'active':'']>这是一个很大的h1，下面都是废话为了凑字数</h1>-->
    <!--"这是第四种方法，用传对象的方式去完成"-->
    <!--<h1 :class=['red','thin',{active:true}]>这是一个很大的h1，下面都是废话为了凑字数</h1>-->
    <!--"这是第五种方法，直接写在data里面用一个对象包起来"-->
    <h1 :class=['red','thin',classobj]>这是一个很大的h1，下面都是废话为了凑字数</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true,
            classobj:{
                active:true
            }
        },
        methods: {
            show: function () {

            }
        }
    })
</script>
</body>
</html>

值得注意的是：
1.letter-spacing和Word-spacing前者是用于设置中文间距，后者用于英文间距。