一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

前言

在上一篇文章中，讲过了数据、方法、计算属性和侦听器，今天我们要深入了解一下vue的样式绑定语法的用法。大家在之前的例子中可能有自己尝试过这种语法，下面我们就详细的讲解一下。

class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `<div class='red'>Hello World</div>`
    });
    const vm = app.mount('#root');
</script>
</html>

无论是在HTML中，亦或是在vue里面，都可以直接在DOM元素中去写class内容，但是在很多项目中，我们会根据不同的场景去渲染不同的class内容，那么在vue里面就有三种写法去定义class。

在data中定义一个参数classString，将参数绑定到class上

const app = Vue.createApp({
    data(){
        return {
            classString: 'green'
        }
    },
    template: `<div v-bind:class='classString'>Hello World</div>`
});
const vm = app.mount('#root');

这种写法和固定写法基本无异，都是通过class中定义一个样式名，然后在页面上渲染出来，下面两种方式就不一样了。

在data中定义一个参数classObject，参数是一个对象值，将参数绑定到class上

const app = Vue.createApp({
    data(){
        return {
            classObject: {red: true, green: true}
        }
    },
    template: `<div v-bind:class='classObject'>Hello World</div>`
});
const vm = app.mount('#root');

通过浏览器控制台可以看出，DOM元素上的class中直接渲染出了red和green两个样式名，这是因为我们在classObject中将red和green都设置为true了，如果我们将其中一个改为false会怎样呢？

classObject: {red: true, green: false}

将green设置为false之后，页面上渲染出来的就只有red这一个样式名了。

在data中定义一个参数classArray，参数是一个数组值，将参数绑定到class上

const app = Vue.createApp({
    data(){
        return {
            classArray: ['red', 'green']
        }
    },
    template: `<div v-bind:class='classArray'>Hello World</div>`
});
const vm = app.mount('#root');

这种方式看起来好像和classObject那样没什么区别，只是换了一种写法而已，但是我们知道在数组里面是可以添加对象的。

classArray: ['red', 'green', {yellow: true}]

在classArray中添加了一个对象之后，将对象值设为true，这时候页面上就会渲染对象中的数据了。

小结

通过上面的三种定义方式，可以在项目中应用到不同的场景里面，具体可以根据需求去调整。

组件之间传递class

在之前的文章中，我们学过一点点组件之间传参的内容，但是下面要学到的会和之前传递父组件中data里面的参数有所不同。

<script>
    const app = Vue.createApp({
        data(){
            return {
                classString: 'red'
            }
        },
        template: `
            <div v-bind:class='classString'>
                Hello World
                <demo />
            </div>
        `
    });
    app.component('demo', {
        template: `
            <div>Demo</div>
        `
    })
    const vm = app.mount('#root');
</script>

这时候我们在浏览器中会发现子组件已经被渲染出来了，但是子组件继承了父组件的样式，如果我们想要让子组件有自己单独的样式呢？是不是可以直接在demo元素上直接写class了。

<demo class='green' />

但是这种情况只是在子组件中只有一个根元素的情况下才会有作用，如果子组件中有多个根元素，那还会不会生效呢？

app.component('demo', {
    template: `
        <div>Demo1</div>
        <div>Demo2</div>
    `
})

我们发现好像并没有什么作用哦，子组件里面的内容还是继承了父组件里面的class，如果我想让子组件里面的某个div元素能够拿到父组件传递过去的class应该怎么写呢？

app.component('demo', {
    template: `
        <div v-bind:class='$attrs.class'>Demo1</div>
        <div>Demo2</div>
    `
})

当我们在子组件中的某一个根元素上绑定了class，然后将class的值设为$attrs.class之后，在页面上就可以渲染出父组件直接传递给子组件的class属性了。

style

<script>
    const app = Vue.createApp({
        template: `<div style='color: blue'>Hello World</div>`
    });
    const vm = app.mount('#root');
</script>

当我们在vue里面写行内样式的时候，其实也和纯HTML一样的写法，但是vue里面也给这种行内样式做了一些拓展，下面就来详细讲一下。

<script>
    const app = Vue.createApp({
        data(){
            return {
                styleString: 'color: red'
            }
        },
        template: `<div v-bind:style='styleString'>Hello World</div>`
    });
    const vm = app.mount('#root');
</script>

通过给style绑定一个值之后，就可以动态展示行内样式了，但是如果样式过多了之后，在一个字符串里面一直写下去好像也不太美观，那么vue里面就提供了另外一种方式。

<script>
    const app = Vue.createApp({
        data(){
            return {
                styleObject: {
                    color: 'red',
                    backgroundColor: 'yellow'
                }
            }
        },
        template: `<div v-bind:style='styleObject'>Hello World</div>`
    });
    const vm = app.mount('#root');
</script>

style也可以拓展一个对象值去渲染样式。

总结

通过本篇文章的学习之后，相信大家对vue里面的样式应该怎么去写，如何更好的运用动态属性class和style也有了一定的理解，大家也可以多写一点其他案例，还有更多有趣的拓展等着大家去发掘哦~~~

【Vue3从零开始-第二章】2-5 样式绑定语法

前言

class

小结

组件之间传递class

style

总结