Vue：绑定样式

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中，反之不添加

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属性添加到一个对象中

{{name}}

new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        styleObj:{

            fontSize: '40px'

        }

    }   

})

* * *



[]( )2、数组写法

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



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

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

new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        styleArr:[

            {

                fontSize:'40px',

                color:'blue'

            },

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• [外链图片转存中…(img-2iDH8TNE-1714387357879)]

常用算法面试题：

• [外链图片转存中…(img-88jQ9L1b-1714387357879)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

•