规则

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>绑定样式</title>
        <style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }

            .happy{
                border: 4px solid red;;
                background-color: rgba(255, 255, 0, 0.644);
                background: linear-gradient(30deg,yellow,pink,orange,yellow);
            }
            .sad{
                border: 4px dashed rgb(2, 197, 2);
                background-color: gray;
            }
            .normal{
                background-color: skyblue;
            }

            .atguigu1{
                background-color: yellowgreen;
            }
            .atguigu2{
                font-size: 30px;
                text-shadow:2px 2px 10px red;
            }
            .atguigu3{
                border-radius: 20px;
            }
        </style>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            绑定样式：
                1. class样式
                    写法:class="xxx" xxx可以是字符串、对象、数组。
                        字符串写法适用于：类名不确定，要动态获取。
                        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
                2. style样式
                    :style="{fontSize: xxx}"其中xxx是动态值。
                    :style="[a,b]"其中a、b是样式对象。
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <!-- 绑定class样式--字符串写法，适用于：样式的类名 不确定，需要 动态指定 -->
            <!--
                class="正常css样式名" //用于正常绑定一个基本的不变的样式.
               :class="属性" //该方法用于绑定一个变化的样式
                最终在 页面 看到的效果：将上面的 class和:class 合并为 class。
            -->
            <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

            <!-- 绑定class样式--数组写法，适用于：要绑定的 样式个数 不确定、名字 也不确定 -->
            <!-- 把classArr属性数组中的所有元素都追加到 class样式中 -->
            <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

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

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                mood:'normal',

                //定义一个数组:
                classArr:['atguigu1','atguigu2','atguigu3'],

                //定义一个对象:
                classObj:{
                    atguigu1:false,    //通过 false/true 控制 atguigu1 样式是否添加到 :class 样式中。
                    atguigu2:false,
                }
            },
            methods: {
                changeMood(){
                    const arr = ['happy','sad','normal']
                    //Math.random() 随机生成[0,1)范围的任意一个数
                    //               *3的目的，可以生成 0.*** 1.*** 2.*** 样式的数，但是不会生成 3.***
                    //Math.floor() 向下取整
                    const index = Math.floor(Math.random()*3) //随机生成 0/1/2 其中的一个数
                    this.mood = arr[index]
                }
            },
        })
    </script>

</html>
026_绑定class样式

规则

源码
