Vue动态修改伪元素的样式和属性

已于 2023-04-25 22:43:14 修改
阅读量1.2k 收藏 6
点赞数 2
文章标签： html5 javascript css3 vue
于 2023-04-22 09:55:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71469120/article/details/130300781
版权

当我们使用伪元素布局时,想动态的切换伪元素的样式和属性时.它并没有具体的标签元素让我们去绑定事件,从而没办法去获取和操作它.以下是动态操作伪元素的一种思路.

HTML元素

将backgroundimage函数绑定给--pic

 vue设置元素

设置图片的路径

 设置计算属性

通过backgroundimage函数将图片路径返回出去,这样--pic就为函数backgroundimage的返回值

 伪元素

给伪元素定义一个变量,接收--pic的值

 设置监视属性

如果password的值变化,就修改图片路径,实现动态修改.也可自定义设置一个触发函数,执行动态修改操作

卷小白
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在vue中动态修改css其中一个属性值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
vue动态样式绑定改变伪元素等特殊样式(css var函数)
热门推荐
一只前端小菜鸟
01-21 2万+
改变样式是我们实际开发中最常做的事情。 诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。 诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。 那么，在vue中，我们更能很轻松的达到这点。 看下常见的几种情景： 情景一：我们需要根据某个变量是否存在（触发），去动态添加样式 描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果 <div ...
vue+element 动态修改伪类样式 --Var()
Komorebi的博客
06-12 1340
【代码】vue+element 动态修改伪类样式 --Var()
jquery动态修改:after:before伪元素content值
最新发布
callBack_____的博客
05-14 159
【代码】jquery动态修改:after:before伪元素content值。
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
weixin_36087905的博客
12-23 1248
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法，获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。语法：window.getComputedStyle(element, [pseudoElement])参数如下：element(Object)：伪元素的所在的DOM元素；pseud...
JavaScript事件委托动态修改CSS伪元素:after和:before的样式
Constantiny的博客
04-02 1949
网页的页面如图加了一个伪元素::before实现了遮罩效果但是我想在点击按钮的时候清除掉这个效果呈现本来的图片。
【Vue】在vue中使用var()函数动态更改伪元素的css样式
Gh的博客
03-23 4296
在vue中使用var()函数动态更改伪元素的css样式
Vue 动态设置css伪元素content的值，解决不渲染和渲染为数字的问题
疑问 搜索 动手 解决 记录
09-27 1796
直接的赋值为数字的话或者在computed()计算属性中去做toString()依然是不会显示的，如果你在打开控制台时看到 --fraudScoreNum 的值仍然是数字 54，而不是字符串 ‘54’，那可能是因为浏览器对于 CSS 自定义属性的处理方式导致的。如果你想要确保 --fraudScoreNum 的值作为字符串类型传递给 content 属性，你可以在 Vue 模板中使用引号将其括起来。所以无论你是将 --fraudScoreNum 设置为 ‘54’ 还是 54，它们都可以被解析为数值 54。
vue中动态style(如何动态修改伪元素样式)
寬真
09-14 1051
vue中动态style(如何动态修改伪元素样式)_vue怎么在行内给伪元素加样式_爱上星星的鲸鱼的博客-CSDN博客
Vue F05 -- 伪类元素
Toreme的博客
07-14 1555
Vue入门学习系列
vue中element组件样式修改无效的解决方法
08-28
在 Vue 单文件组件 (Single File Component, SFC) 的 `<style>` 标签中，如果添加了 `scoped` 属性，如 `<style scoped>`，则该样式只会影响到该组件内部的元素。这是Vue为了实现组件间的样式隔离而设计的机制，防止...
用js实现before和after伪类的样式修改的示例代码
12-29
最近遇到一个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。 类如如下的html及...
vue自定义switch开关组件,实现样式可自行更改
10-16
`before`和`after`伪元素用于创建开关内部的滑动效果。`transition`属性提供了平滑的过渡动画。 ```css .weui-switch { display: block; position: relative; width: 52px; height: 24px; border: 1px solid ...
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
在现代浏览器中，我们可以利用CSS的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`来定制滚动条的外观。然而，这种CSS方法并不适用于所有浏览器，尤其是IE。 为了实现跨浏览器的自定义滚动条，我们可以...
有趣且重要的css知识合集（6）动态控制css伪元素【var()】
qq_39404437的博客
12-08 1541
在vue里，js和css的属性可以随意控制，比如:class和:style，但是我们想要动态控制伪元素的属性该怎么做呢？比如下图，右下角小圆圈就是通过伪元素定义上去的，那我们想要自由实现伪元素的显示和隐藏该怎么做呢？那就可以通过var()函数可以代替元素中任何属性中的值的任何部分，想要具体了解的可以看官方文档噢~下面是链接。
vue中动态修改style(修改伪元素样式)，样式中使用data里面的数据
meimeib的博客
06-09 5670
需求 伪元素高度使用data中的变量，对其进行动态修改 实现 css/less中使用变量的方式 声明css变量的时候，变量名前面要加两根连词线（–）。 变量名大小写敏感，–header-color和–Header-Color是两个不同变量。 var()函数用于读取变量。 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 第二个参数不处理内部的逗号或空格，都视作参数的一部分 根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置
render vue 添加类_vue函数式组件中的render函数如何添加伪类样式
weixin_39907289的博客
12-20 214
问题描述export default {functional: true,props: {data: {type: String,default() {return '';}},depth: {type: Number}},render: (h, ctx) => {return h('div', {class: ['treeitem'],style: {':hover': {backgrou...
vue动态设置css样式，设置class以及::before伪元素背景图片
qq_40315971的博客
04-30 7921
1.动态设置div的class 可以通过传给:class一个对象，以动态地切换class <div :class="{ active: isActive,'text-danger': hasError }"></div> 上面表示active这个class是否存在。取决于数据property isActive的真假，'text-danger'这个class同理 数组语法，可以把一个数组传给:class,以应用一个class列表 <div class="rele
【Vue】动态设置元素类以及样式
cannotbecounted的博客
08-23 2288
介绍Vue2中动态为DOM元素添加类和样式的方法。
vue动态修改伪元素样式
10-17
2. 在 Vue 组件中使用 `$refs` 获取元素，并通过 `style` 属性修改伪元素的样式，例如： ```html <div class="my-element" ref="myElement"></div> export default { mounted() { const myElement = this.$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卷小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值