Vue第六天（样式绑定）

最新推荐文章于 2025-01-06 08:22:14 发布

若叶-知秋

最新推荐文章于 2025-01-06 08:22:14 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： Vue 自学菜鸟

本文链接：https://blog.youkuaiyun.com/qq_31051117/article/details/83994008

准备步骤如第一天

代码：（测试注意事项：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>