vue.js绑定class

最新推荐文章于 2025-05-13 09:54:01 发布

Code Pupil

最新推荐文章于 2025-05-13 09:54:01 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/Code_Pupil/article/details/79679813

vue.js 专栏收录该内容

15 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app1">
    <!--# 给v-bind设置一个对象，可以动态地切换class #-->
    <div :class="{'active':isActive}"></div>
</div>

<div id="app2">
    <!--# 给v-bind设置一个对象，可以动态地切换class #-->
    <!--# 对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存 #-->
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>

<div id="app3">
    <!--# 给v-bind设置一个对象，可以动态地切换class #-->
    <!--# 当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data或computer #-->
    <div :class="classes"></div>
</div>
</body>
</html>
<script>
    //例子一
    var app1 = new Vue({
        el:'#app1',
        data:{
            //类名isActive，当其为true时，div会拥有类名active，为false时则没有
            isActive:true
        }
    });


    //例子二
    var app2 = new Vue({
        el:'#app2',
        data:{
            //类名isActive，当其为true时，div会拥有类名active，为false时则没有
            isActive:true,
            //类名isError，当其为true时，div会拥有类名error，为false时则没有
            isError:true
        }
    });


    //例子三
    var app3 = new Vue({
        el:'#app3',
        data:{
            isActive:true,
            isError:false
        },
        computed:{
            classes:function () {

                return {
                    active:this.isActive && !this.isError
                }
                //除了计算属性，你也可以直接绑定一个Object类型的数据，或者使用类似计算机属性的methods
            }
        }
    })
</script>