2024年最新Vue：绑定样式，2024年最新前端软件开发面试题

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

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



* * *



[]( )2、数组写法

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



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

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属性以对象的形式添加到一个数组中





#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)