Vue：绑定样式

这种写法适用于类名不确定，需要动态指定

---

2、数组写法

---

所谓数组写法，也就是将class样式名写在一个数组里面

<div class="base" :class="arr" @click="changeMood">{{name}}</div>

 new Vue({

        el:'#root',

        data:{

            name:'Hello World',

            mood:"happy",

            arr:['happy', 'bad', 'norlly']

        },

        methods: {

            changeMood(){

                const arr = ['happy', 'bad', 'norlly'];

                //三种样式随机一种

                const index = Math.floor(Math.random()*3);

                this.mood = arr[index]

            }

        },

    })

这种写法适用于绑定的样式不确定，名字也不确定的情况

这样就可以利用数组的性质，对数组里面的数据进行增加或者删除

---

3、对象写法

---

对象写法就是将class绑定的是一个对象

对象里面的是一对对的键值对

键为样式名，值为波尔类型

当布尔类型为true，这个样式添加到div中，反之不添加

 <div class="base" :class="classObj" @click="changeMood">{{name}}</div>

    new Vue({

        el:'#root',

        data:{

            name:'Hello World',

            mood:"happy",

            arr:['happy', 'bad', 'norlly'],

            classObj:{

                happy:false,

                bad:false,

                norlly:true

            }

        },

        methods: {

            changeMood(){

                const arr = ['happy', 'bad', 'norlly'];

                //三种样式随机一种

                const index = Math.floor(Math.random()*3);

                this.mood = arr[index]

            }

        },

        

    })

这种写法适用于绑定样式个数缺点、名字也确定，但是需要动态决定用不用的情况

---

二、绑定style样式

==============================================================================

使用Vue绑定style样式，需要将属性改为驼峰命名

也就是说，比如font-size改为驼峰命名则是fontSize

---

1、对象写法

---

将需要添加的style属性添加到一个对象中

<div class="base"  :style="styleObj">{{name}}</div>

    new Vue({

        el:'#root',

        data:{

            name:'Hello World',

            styleObj:{

                fontSize: '40px'

            }

        }   

    })

---

2、数组写法

---

将需要添加的style属性以对象的形式添加到一个数组中

        <div class="base"  :style="styleArr">{{name}}</div>


### 基础面试题



> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**



-------------------------------------------------------------------------



> 将需要添加的style属性以对象的形式添加到一个数组中

    <div class="base"  :style="styleArr">{{name}}</div>

基础面试题

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等