绑定样式总结

  1. class样式
    写法：
    :class="xxx" xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  2. style样式
    :style="{fontSize: xxx}" 其中xxx是动态值。
    :style="[a,b]"其中a,b是样式对象。

一、绑定class文件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <style>
        .basic{
            /* border-style:groove; */
            /* border: 2px solid black; */
            width: 400px;
            height: 400px;
        }
        .happy{
            border: 4px solid red;
            /* background-color: rgba(255, 255, 0, 0.644); */
            background:linear-gradient(30deg,red,pink,orange,yellow);
        }
        .sad{
            border: 4px solid blue;
            border-radius: 5px;
            /* background-color: orange; */
            /* background-color: rgba(255, 0, 89, 0.644); */
            background:linear-gradient(30deg,blue,pink,orange,yellow);
        }
        .normal{
            border:4px solid grey;
            border-radius: 5px;
            background: linear-gradient(30deg,grey,grey,pink,orange);
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        准备好一个容器
    -->
    <div id="root">
        <!-- <div class="basic" :class="mood" @click="change(); test()" >test</div> -->
        <div class="basic" :class="mood" @click="change" >心情随机测试</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
   
    const vm = new Vue({
        el: '#root',
        data: {
            trigger: false,
            mood: 'sad'
        },
        methods: {
            change(){
                const arr = ['happy','sad','normal']
                const i = Math.floor(Math.random()*3)  //最多到2.***，不会到3
                this.mood = arr[i]
                console.log(this.mood)
            }
            // change() {
            //     if(this.mood === 'sad') this.mood = 'happy'
            //     else this.mood = 'sad'
            // },
            // test() {
            //     console.log(this.mood)
            // }
        },
    })
</script>
</html>

代码格式效果如下：

二、绑定style文件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式-style</title>
    <style>
        .basic{
            /* border-style:groove; */
            /* border: 2px solid black; */
            border: 4px solid black;
            width: 400px;
            height: 400px;
        }
        .happy{
            border: 4px solid red;
            /* background-color: rgba(255, 255, 0, 0.644); */
            background:linear-gradient(30deg,red,pink,orange,yellow);
        }
        .sad{
            border: 4px solid blue;
            border-radius: 5px;
            /* background-color: orange; */
            /* background-color: rgba(255, 0, 89, 0.644); */
            background:linear-gradient(30deg,blue,pink,orange,yellow);
        }
        .normal{
            border:4px solid grey;
            border-radius: 5px;
            background: linear-gradient(30deg,grey,grey,pink,orange);
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        准备好一个容器
    -->
    <div id="root">
        <div class="basic" :class="mood" @click="change" >心情随机测试</div><br/><br/>
       
       
        <div class="basic" :style="styleObj">{{name}}</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
   
    const vm = new Vue({
        el: '#root',
        data: {
            name:'基督山',
            trigger: false,
            mood: 'sad',
            styleObj:{    //style格式的对象写法，即定义为：键值对形式的对象。
                fontSize:'40px',
                color:'red'
            }
        },
        methods: {
            change(){
                const arr = ['happy','sad','normal']
                const i = Math.floor(Math.random()*3)  //最多到2.***，不会到3
                this.mood = arr[i]
                console.log(this.mood)
            }
        }
       
    })
</script>
</html>