vue-例3-10v-bind绑定class.html

最新推荐文章于 2025-12-22 21:38:10 发布

原创最新推荐文章于 2025-12-22 21:38:10 发布 · 39 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章演示了在Vue.js中如何使用v-bind:class指令来动态绑定class。它展示了通过内联对象、表达式和计算属性三种方式来控制元素的class，包括条件类（如active）和风格类（如textDanger）的切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定class</title>
</head>
<body>
    <h1>绑定class属性，采用对象表达式</h1>
    <div id="app">
        <div class="static" v-bind:class="{active:isActive,'textDanger':hasError}">内联对象方式</div>
        <div v-bind:class="classObject">表达式</div>
        <div v-bind:class="computedClass">计算属性方式</div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               isActive:true,
               hasError:false,
               classObject:{
                   active:true,
                   'textDanger':false
               }
           },
            computed:{
               computedClass:function () {
                   return {
                       active: this.isActive && this.hasError,
                       'textDanger':this.hasError || !this.active,

                   }
               }
            }
        });
    </script>

    <style>
        .static{
            border: 1px solid black;
        }

        .active{
            background-color: lightgray;
        }

        .textDanger{
            color: red;
        }

    </style>
</body>
</html>