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

2022-09-26 139

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇文章中，讲过了数据、方法、计算属性和侦听器，今天我们要深入了解一下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>
复制代码

N2F%{GYKRPD00]QPF48BTHN.png

无论是在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');
复制代码

W$I[JNX(`BH9Y9{(G{T6W4I.png

这种写法和固定写法基本无异，都是通过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');
复制代码

[`SC{H{W4MI]%FLCCH$VEVG.png

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

classObject: {red: true, green: false}
复制代码

ZM4RZWV~ZRYZF3XLGZZELB2.png

将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');
复制代码

GDTC2K8~`[1H626@LXOI9US.png

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

classArray: ['red', 'green', {yellow: true}]
复制代码

8JR274SB@NL%QD[_BR3F7P5.png

在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>
复制代码

PJFCB{)I1)4N]0DG8]V28PP.png

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

<demo class='green' />
复制代码

YA(}JL`W~DF8NCA1`@$1`(5.png

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

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

$$`KV%XEH7[_{ZOQ)O`U7JTR.png$

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

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

$WWB(4`I0E5D]R}F7CBX3ZP.png

当我们在子组件中的某一个根元素上绑定了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>
复制代码

17JCWW~$E}`YG6%~G$OHULO.png

当我们在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>
复制代码

LI7NHZ]9~Y79S_PH9GCKY70.png

通过给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>
复制代码

G5@80}SI3KHKIZBJ~G6FWK6.png

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

总结

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

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

前言

class

小结

组件之间传递class

style

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

class

小结

组件之间传递class

style

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景