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,浏览器,性能优化