Vue.js的学习记录_7

青旅半醒 2022-03-09 18:08 135阅读 0赞

### 动态CSS ###

*  vue.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Dynamic css</title>
        <link rel="stylesheet" href="vue.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="Vue-app">
            <h1>Dynamic Css</h1>
            <h2>Example 1</h2>
            
            <h2>Example 2</h2>
            <button v-on:click="available = !available">Toggle available</button>
            <button v-on:click="nearby = !nearby">Toggle nearby</button>
            <div v-bind:class="comClasses">
                <span>Dan-Xiang-Jian-Tou</span>
            </div>
        </div>
        <script src="vue.js"></script>
    </body>
    </html>

*  vue.js

new Vue ({ 
        el: '#Vue-app',
        data: { 
            available: false,
            nearby: false,
            a: 12
        },
        methods: { 
    
        },
        computed: { 
            comClasses: function() { 
                return { 
                    available: this.available,
                    nearby: this.nearby
                }
            }
        }
    })

*  vue.css

span { 
        background: red;
        display: inline-block;
        padding: 10px;
        color: #fff;
        margin: 10px 0;
    }
    
    .available span { 
        background: green;
    }
    .nearby span:after { 
        content :"nearby";
        margin-left: 10px;
    }

### `记录` ###

*  这节的知识还是挺好玩的，主要学习了v-bind：class的两种使用方法。
 *  提前在css文件中写好相应的属性值。
 *  第二种直接在computed中自动返回available和nearby的两个对象,这个是我非常感兴趣的点儿。