vue10-2 使用v-bind绑定标签的class属性

注意： v-bind要绑定某个数据，那前提是，这个数据必须是存在的
    <style>
        .basic{
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }
        .happy{
            color: blue;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="root"> 
        <!-- 绑定class， 只能绑定现有的变量或方法，且变量的值或方法返回值，必须是已经写好的样式名 -->
        <div class="basic" :class="happy">123456</div>
        <div class="basic" :class="getcolor2()">123456</div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root', 
            data() {
                return {
                    name: 'leaf',
                    happy: 'happy',
                }
            },
            methods: {
                getcolor2(){
                    // return {happy: true}
                    return 'happy'
                }
            },
 
正常样式class直接写class='', 而附加的class或者动态变化的class，则使用v-bind:class='变量名' ， 
 注意：不能直接写style中的样式名，因为v-bind:class只会从vue对象中去找变量，方法，计算属性等去找，而不会取style中去找 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind:class</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }
        .happy{
            color: blue;
            background-color: aqua;
        }
        .sad{
            color: yellow;
            size: 30px;
            background-color: blueviolet;
        }
        .weep{
            border-radius: 3px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 正常样式class直接写class='',  而附加的class或者动态变化的class，则使用v-bind:class='变量名' -->

        <!-- 错误代码1：不能直接写style中的样式名，因为v-bind:class只会从vue对象中去找变量，方法，计算属性等去找，而不会取style中去找 -->
        <!-- <div class="basic" :class="sad">{{name}}</div><br/><br/> -->
        
        <!-- 错误代码2：一般不能直接使用v-bind绑定具体css代码 -->
        <!-- <div class="basic" :class="{background-color: green}">{{name}}</div><br/><br/> -->


        <!-- 动态绑定class的三种写法和使用情况 -->

        <!-- 绑定class样式--字符串写法， 适用于：要绑定的样式类名不确定，需要动态指定 -->
        <div class="basic" :class="up_class" @click="tabColor">{{name}}</div><br/><br/>

        <!-- 绑定class样式--数组写法， 适用于：要绑定的样式个数不确定，名字也不确定,使用绑定数组方式，可以随意增删数组中的元素 -->
        <div class="basic" :class="classArr">{{name}}</div>

        <!-- 绑定class样式--对象写法， 适用于：要绑定的样式个数确定，名字也确定, 但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div><br/><br/>


        <!-- 绑定style -->
        <div class="basic" :style="getColor()">hah</div>

    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root', 
            data() {
                return {
                    name: 'leaf',
                    up_class: ' ',
                    classArr: ['happy', 'sad', 'weep'],
                    classObj:{
                        happy: false,
                        weep: true
                    }
                }
            },
            methods: {
                tabColor(){
                    cont = ['happy', 'sad', 'weep']
                    // Math.random(), 取0-1之间的值，不会取到1；Math.floor（）取地板值整数
                    index = Math.floor(Math.random()*3)
                    this.up_class = cont[index]
                },
                getColor(){
                    return {color: 'green'}
                }
            },
        })
    </script>    
</body>
</html>
 
 