美文网首页
vue class样式的运用2

vue class样式的运用2

作者: 夜息白鸽 | 来源:发表于2017-07-18 17:39 被阅读0次

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>

相关文章

网友评论

      本文标题:vue class样式的运用2

      本文链接:https://www.haomeiwen.com/subject/ynphkxtx.html