美文网首页
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