绑定样式
1.class样式
写法：class=“xxx”xxx可以使字符串、对象、数组
字符串法：适用于类名不确定，要动态获取
对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用
数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用
2.style样式
：style=“{fontSize：xxx}”其中xxx是动态值
：style="[a,b]"其中ab是样式对象，如下
文章图片
【Vue|绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）】
文章图片
目录
一、绑定class样式
1.绑定class样式--字符串写法
2.绑定class样式--数组写法
3. 绑定class样式--对象写法
4.最终代码 案例：单击div实现变换心情（sad、normal、happy）
二、绑定style样式
1.方法一直接绑定法
2.方法二对象法
一、绑定class样式
1.绑定class样式--字符串写法
{{name}}单击之后，下面这个框会随意变动
文章图片
文章图片
2.绑定class样式--数组写法 适用于绑定的样式个数不确定，名字也不确定
{{name}}下面这个一下次用了三个样式
文章图片
3. 绑定class样式--对象写法 适用于绑定的样式个数确定，名字也确定，但要动态决定用不用
{{name}}data:{
name:'尚硅谷',
mood:'normal',
classArr:['sad','normal','happy'],
classObj:{
atguigu1:false,
atguigu2:false
}
},
methods: {
changeMood(){const arr=['sad','normal','happy']
// 现在只有0,1,2 这三个数
this.mood=arr[Math.floor(Math.random()*3)]
}
},})在右侧root中进行修改
文章图片
4.最终代码 案例：单击div实现变换心情（sad、normal、happy）
初识vue - 锐客网 .basic{
width: 400px;
height: 100px;
border: 1px solid black;
}.happy{
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}{{name}}
{{name}}{{name}}二、绑定style样式 1.方法一直接绑定法
{{name}}data:{
fsize:40,
name:'尚硅谷',
}2.方法二对象法
{{name}}data:{
styleObj:{
// fontsize是css样式中真实存在的
// 我们这个地方直接给一个值就好了
fontSize:'40px'
},name:'尚硅谷',
}推荐阅读
- Vue|数据代理-Object.defineProperty -Vue中的数据代理
- Vue|事件处理、事件修饰符（详细）
- vue|vue-vue3(4)-计算属性与监视computed，watch，watchEffect
- vue|前端之vue计算属性与监视属性
- Vue|Vue（计算属性与监视属性）
- #|vu2 尚硅谷 组件化编程
- vue|Vue3.0 使用 ant-design-vue
- 业务|手撕发布订阅模式 eventBus
- 如何使用CSS伪类选择器