[Vue基础实战]CSS演练

代码演练:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 练习</title>
    <style>
        .red{
            color:red;
        }
        .default{
            font-weight: bold;
        }
    </style>
</head>
<body>    
    <div id="app">
        <div :class="['red','default']">
            航天职大1
        </div>
        <div :class="{'red':true,'default':true}">
            航天职大2
        </div>
        <div :class="['red']">
            航天职大3
        </div> 
        <div :class="'red'">
            航天职大3
        </div>
        <div :style="styleObj">
            航天职大4
        </div>                        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                styleObj:{'color':'blue'}     
            }           
        });
    </script>
</body>
</html>

 

posted @ 2021-01-15 09:23  dshow  阅读(57)  评论(0)  编辑  收藏  举报