VueJs之绑定样式，v-bind:style笔记

最新推荐文章于 2024-05-16 12:26:39 发布

IT悍将阿瑞

最新推荐文章于 2024-05-16 12:26:39 发布

阅读量264

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/jiarui_mama/article/details/114987884

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前言

首先我们要想一想，为什么要动态绑定样式？

因为vue后面会涉及到很多组件，那么组件是可以复用的，这时根据业务的不同，组件展示的效果样式就不同，那么我们就可以动态的绑定样式。

语法

v-bind:style=“key(属性名):value(属性值)”

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="getStyle()">你好 全世界  才不要打工呢</h2>
</div>
<script src="../js/vue.js"></script>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            fontSize:'50px',
            color:"red"
        },
        methods:{
            getStyle:function(){
                return {fontSize:this.fontSize,color:this.color};
            }
        }
    });

</script>
</body>
</html>

效果图

在这里插入图片描述

-END-

如果你喜欢我的分享，欢迎关注微信公众号 java学长分享技术干货！

悄悄告诉你免费赠送重磅互联网架构师教程，提升职场技术水平！

IT悍将阿瑞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VueJs之绑定样式，v-bind:style笔记

前言首先我们要想一想，为什么要动态绑定样式？因为vue后面会涉及到很多组件，那么组件是可以复用的，这时根据业务的不同，组件展示的效果样式就不同，那么我们就可以动态的绑定样式。语法v-bind:style=“key(属性名):value(属性值)”代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g
复制链接

扫一扫