vue中绑定class 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .basic{
                width: 100px;
                height: 100px;
                border: 1px solid #00BFFF;
            }
            .one{
                width: 200px;
                height: 100px;
                border: 1px solid #00BFFF;
                background-color: #5F9EA0;
            }
            .two{
                width: 300px;
                height: 200px;
                border: 1px solid #00BFFF;
                background-color: cornflowerblue;
            }
            .th{
                width: 300px;
                height: 300px;
                background-color:  #008000;
            }
        </style>
    </head>
    <body>
        <div id="app">
            点击div切换class
            <!--绑定class-字符串写法;适用于：样式的类名不确定，需要动态指定-->
            <div class="basic" :class="a" @click="change">{{name}}</div>
            <!--绑定class-数组写法;适用于：要绑定的样式个数不确定，名字也不确定-->
            <div class="basic" :class="arr">{{name}}</div>
            <!--绑定class-对象写法;适用于：要绑定的样式个数确定，名字确定，但动态决定用不用-->
            <div class="basic" :class="obj">{{name}}</div>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    name:'666666',
                    a:'one',
                    arr:['one','two','th'],
                    obj:{
                        one:false,
                        two:false,
                        th:false
                    }
                },
                methods:{
                    change(){
                        const arr = ['one','two','th']
                        //                 [0,1)*3  [0,3)
                        var index = parseInt(Math.random()*3) 
                        console.log(index)
                        this.name = arr[index]
                        this.a = arr[index]
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2021-08-17 19:45  幻影之舞  阅读(44)  评论(0)    收藏  举报