根据data中的变量的值来改变div盒子的背景颜色

最新推荐文章于 2023-07-07 22:32:42 发布

WIN. QR

最新推荐文章于 2023-07-07 22:32:42 发布

阅读量432

点赞数

文章标签： vue css

本文链接：https://blog.csdn.net/weixin_43521206/article/details/128065441

版权

根据数据动态改变样式

如题，根据data中数据的值来动态改变背景颜色
绑定style

data() {
	return{
		isFriend:true
	}
}

:style="
isFriend?{backgroundColor:'#FFE431'}:{backgroundColor:'rgba(74,170,255,0.10)'}
"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WIN. QR

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据data中的变量的值来改变div盒子的背景颜色

根据data中数据的值绑定style来动态改变背景颜色。
复制链接

扫一扫

Vue自定义指令-div根据输入框输入的颜色变化背景色

candy755的博客

09-13

9719

今天利用Vue自定义指令-做个div根据输入框输入的颜色变化背景色的效果图，注意的是，输入的颜色只针对英语和16进制的颜色，输入中文无效。代码奉上： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &lt

vue 实现根据data中的属性值来设置不同的样式

10-14

主要介绍了vue 实现根据data中的属性值来设置不同的样式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

动态设置css样式，背景图，class

qq_61901473的博客

08-23

1262

【代码】css动态设置背景图。

从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。即定义不同样式；

weixin_56898375的博客

05-11

1309

从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。即定义不同样式；

表单 input 中选择已有值时背景颜色修改

twenj1616的博客

02-21

963

input:-webkit-autofill { -webkit-text-fill-color: #808080 !important; transition: background-color 5000s ease-in-out 0s; }

在html中css中背景颜色通过变量的形式引入

热门推荐

yechaoa

08-23

1万+

在h5中可以用js根据id啊、class啊等等找到控件，然后.css 但是在小程序中没有，小程序是数据绑定的模式，style也可以这样写 1，在data中定义变量color data: { color:"#ff6f10", }, 2，在控件中使用 style='color:{{color}};' 3，在需要的场景下修改data中的color即可 ...

【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx

12-29

接下来，我们需要在`data`中定义相关变量来存储拖放过程中涉及的信息： ```javascript data() { return { oldData: [], newData: [], customApps: [], // 存储应用数据 dragStartId: '', // 拖动开始时应用的...

angular实现根据数据的百分比大小来改变盒子的高度

05-30

在 Angular 中，可以通过绑定样式的方式来改变盒子的高度。具体实现步骤如下： 1. 在组件中定义一个变量，保存数据的百分比大小。 2. 在模板中使用该变量，计算出盒子应该具有的高度值，并将该值绑定到样式中。...

Vue点击切换颜色的方法

10-18

在`change`方法内部，我们将`changeRed`的值设置为传入的`index`，这会使得与该索引对应的`<div>`元素添加`red`类，改变颜色。这是一个基础的Vue颜色切换实例，实际上，我们可以进一步扩展和优化这个功能。例如： ...

vue子组件修改父组件中变量的值——实现子组件控制父组件弹出对话框

WEN_Windy的博客

01-16

2473

本文内容参考链接：https://www.cnblogs.com/padding1015/p/7878741.html 弹出框使用ElementUI中表单对话框的样式，实现点击用户注册后，header组件获取main组件中dialogFormVisible的值来控制main组件中表单对话框的弹出。如果直接将表单对话框放在header组件，表单因为header长宽太小变形了，于是，就将对话框放...

vue，自行设计一个div盒子的显示隐藏切换效果。(教材P112)

05-26

首先，在你的 Vue 组件中定义一个布尔类型的变量，用来控制盒子的显示与隐藏： ``` <div> !showBox">切换显示/隐藏 <div v-show="showBox">这是一个盒子</div> </div> export default { data() { return ...

div动态设置背景图遇到的火狐和谷歌浏览器兼容问题

周文超的专栏

10-12

3004

1.最终期望效果如下,输入车号,点击查找,对应机械车闪烁展示 2.前台的展示div是在后台生成的,通过定时调用切换div的背景效果,切换代码如下 function showFixed(id){ var glintDiv = document.getElementById(id); var style = glintDiv.style; divbg = style.bac

如何使用vue中的data属性，动态修改css的属性。动态改变网站主题色

w13966597931的博客

04-14

1252

1、安装插件 css-vars-ponyfill。如何使用vue动态改变门户主题色。2、在需要的界面中引入。 3、定义变量。4、在需要自定义颜色的地方使用var(--themeColor)即可

vue 从后台v-for获取到的数组怎么给每一项设置不同的背景色

m0_60699903的博客

05-16

2376

v-for获取到的数组怎么给每一项设置不同的背景色

echarts属性的设置（完整大全）

m0_70273331的博客

05-03

3650

// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配 backgroundColor: ‘rgba(0,0,0,0)’, // 背景颜色 dataBackgroundColor: ‘#eee’, // 数据背景颜色 fillerColor: ‘rgba(144,197,237,0.2)’, // 填充颜色 handleColor: ‘rgba(70,130,180,0.8)’ // 手柄颜色 }, [](()

vue动态改变主题颜色

zsq199771的博客

01-13

2746

新建.scss后缀公用文件，放在assets或者其他地方都可以 /*需要切换的颜色变量*/ $color-primary1:#1776E1; /* 更换的颜色 */ $color-primary2:#3588CB; /* 更换的颜色 */ $color-primary3:#7D0000; /* 更换的颜色 */ $color-primary4:#EB6100; /* 更换的颜色 */ /*定义方法*/ @mixin color_primary($color){ color:$color;

《点击div改变颜色方法》

qq_42259086的博客

03-29

2832

以下代码在.vue文件中实现 1、把需要点击变色的字体放入list中,这里使用titleList 2、循环这个数组 3、在data中给i1赋值，次值为默认显示选中的div的index值 4、点击事件中给i1重新赋值 5、在自定义命名changecolor中设置点击变色的背景色或者阴影或字体设置。效果如下： ...