master

分支 (1)

管理

管理

master

vue-test
/
5、样式绑定.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            color:red
        }
        .two{
            font-size: 50px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--该标签是否有one和two样式，取决于属性isColor和isFont是否为true-->
        <p :class="{one:isColor,two:isFont}">今年过节不收礼</p>
        <span :class="classObj">送礼只收脑白金</span>
    </div>

    <script>
        var vueObj = new Vue({
            el:"#app",
            data:{
                isColor:true,
                isFont:true
            },
            computed:{
                classObj(){
                    return {one:true,two:false};
                }
            }
        });
    </script>
</body>
</html>