ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue 动态样式 ,style,class

2021-06-07 20:59:41  阅读:127  来源: 互联网

标签:style vue 样式 color json 类名 class red


在这里插入图片描述
class 动态样式,可以跟变量,数组,json
如果跟json后面是“类名”:boolean,如果是真值就添加这个类名,假值就不添加。

style 动态style 后面跟的是json,也可以是变量

<div id="app">
        <h2 :style="red">春江花月夜</h2>    //red是一个json对象,里面写着css的样式值
        <button @click=change>修改样式</button>
    </div>
    <script>
        new Vue({
            el: "#app", 
            data: { 
                red:{
                    background:"red",
                    color:"white",
                }
            },
            methods: { //方法
                change(){     //点击修改json的值就可以修改h2的样式了
                    this.red.background = "black",
                    this.red.color = "red"
                }
            }
        })
    </script>

标签:style,vue,样式,color,json,类名,class,red
来源: https://blog.csdn.net/weixin_45304069/article/details/117673877

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有