vue class样式的运用2

1和之前不同,这里我们data放入布尔值;相当于作为开关来控制class是否调用
2注意这种写法是:class{属性:a,属性:b}。

<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:true,
                    b:false
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :class="{red:a,blue:b}">文字...</strong>
    </div>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,120评论 19 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 14,029评论 6 13
  • 转至元数据结尾创建: 董潇伟,最新修改于: 十二月 23, 2016 转至元数据起始第一章:isa和Class一....
    40c0490e5268阅读 5,885评论 0 9
  • 我还是一个年轻的小人儿 可在很久很久以前 我就决定要在二十多岁的某一天 骑马踏雪归家 用一整个季节的寒梅见证我的清...
    bb53503536bd阅读 1,360评论 0 1
  • 校园时代的结束,也是成年生活的开始。离开校园,就是离开这一生最单纯无忧的岁月。当看到这句话的时候,正是我现在真真切...
    夕月子阅读 1,522评论 0 0

友情链接更多精彩内容