Vue第六天(样式绑定)

准备步骤如第一天

代码:(测试注意事项:js中的代码依次开启测试,不可全部开启,会报错)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<style>
    .active {
        width: 100px;
        height: 100px;
        background: green;
    }

    .text-danger {
        background: red;
    }
</style>
<body>
<div id="app">
    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isActive: false,
            hasError: true
        }
    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_31051117/article/details/83994008