vue实现简单的点击切换颜色 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>changeColor</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
    div {width: 100px;height: 100px;background: lightcoral;}
    .changeColor {background: lightgreen;}
</style>

<body>

    <section id="app">
        <div :class="{changeColor}" @click="changeColor =! changeColor">
        </div>
    </section>

    <script>
        new Vue({
            el: '#app',
            data: {
                changeColor: false
            }
        })
    </script>
</body>

</html>

posted @ 2019-07-30 11:18  guangzan  阅读(12200)  评论(1)  编辑  收藏  举报