vue 控制伪类元素的显示

最新推荐文章于 2024-05-30 10:06:50 发布
最新推荐文章于 2024-05-30 10:06:50 发布
阅读量3.5k 收藏 4
点赞数 4
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013611033/article/details/106671965
版权 

<view :class='switchBox===true?'list_cen border':'list_cen'"></view>





.list_cen {
      padding-top: 31/100rem;
      width: 100%;
      position: relative;
      &.border::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: -0.4rem;
        height: 2px;
        width: 100%;
        background: rgba(232, 232, 232, 1);
      }
}

 

在list_cen盒子后面追加横线,只要动态控制border这个类名就可以了

思绪万千133
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
weixin_36087905的博客
12-23 1248
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法，获取伪元素的CSS样式声明对象。然后利用getPropertyValue方法或直接使用键值访问都可以获取对应的属性值。语法：window.getComputedStyle(element, [pseudoElement])参数如下：element(Object)：伪元素的所在的DOM元素；pseud...
html 触发after,关于伪类after后续追加，实现js事件（如点击事件）
weixin_33040687的博客
06-15 1948
实现情况为：点击“编辑”后，“编辑”文字变成“完成”，再点击伪类元素后的“完成”，此时的“完成”应该变成“编辑”情况描述为：如果用伪类实现，点击“编辑”后变成“完成”，再点击“完成”，无反应原因排查为：原“编辑”和后“完成”是同一个span，只是不同类名，但后续动态追加的类名，无法实现点击【语言烦躁，来示例吧】html：.edit{after:"编辑"}.complete{after:"完成"} ...
vue中动态修改style(修改伪元素样式)，样式中使用data里面的数据
meimeib的博客
06-09 5670
需求 伪元素高度使用data中的变量，对其进行动态修改 实现 css/less中使用变量的方式 声明css变量的时候，变量名前面要加两根连词线（–）。 变量名大小写敏感，–header-color和–Header-Color是两个不同变量。 var()函数用于读取变量。 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 第二个参数不处理内部的逗号或空格，都视作参数的一部分 根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置
vue3，使用伪类选择器实现hover效果
最新发布
qq_64545713的博客
05-30 368
position:absolute使用绝对定位，是相对于最近的已定位的祖先元素，如果没有定位的元素，则相当于初始块元素而言。说明：使用after伪类，使用content:'',会在伪元素的页面上生成一个占位符。transition为伪元素的所有可动画属性设置过渡效果。bottom:-2px悬停在伪元素底部元素之上。left:0与设置的伪元素左端对齐。
vue动态控制样式
ct5211314的博客
03-29 1706
在Vue项目开发中往往需要通过某个变量来控制页面样式的展示，根据变量显示不同的样式，以此来表状态以及用户的操作等。下面我们一起整理下通过变量控制样式的语法表达式。
jquery写伪类样式、隐藏和显示、循环写法、点击事件等等项目中的事件方法
weixin_60172238的博客
06-19 310
项目中的一些事件
CSS3 :default伪类选择器使用简介
09-24
测试显示，即使通过JavaScript迅速改变表单元素的默认状态，`:default` 伪类选择器的效果不会受到影响。例如，如果初始设置第二个单选按钮为`:default`，然后使用JavaScript即时改变为第三个单选按钮，`:default` ...
Vue2 css signal chart
01-19
- **CSS选择器**：CSS选择器用于选择HTML元素并应用样式，如类选择器（`.class`）、ID选择器（`#id`）和伪类选择器（`:hover`, `:active`等）。 - **盒模型**：理解CSS的盒模型对于精确控制元素尺寸至关重要，包括...
关于vue的列表图片选中打钩操作
10-14
同时，`input[type="checkbox"]`和`input[type="radio"]`被设置为隐藏，只显示`i`元素，当选中时，通过`:checked`伪类改变背景色和文字颜色。 2. **Vue模板结构**： 在Vue模板中，使用`v-for`指令遍历列表数据，为...
InputFieldComponent.vue.zip
01-03
对于下划线，可以使用伪元素如`:before`或`:after`来创建，并通过JavaScript动态修改其CSS属性来实现显示和隐藏。 6. **组件使用**： 在其他Vue组件中，我们可以像使用内置组件一样引入并使用`InputFieldComponent...
Vue实现点击后文字变色切换方法
08-28
v-show指令是Vue框架中的一种指令，用于控制元素的显示和隐藏。在本例中，我们使用v-show指令来控制文字的显示和隐藏，代码如下： ``` !showCommentInput" @click="showCommentInput = !showCommentInput">回复 ``` ...
vue动态样式绑定改变伪元素等特殊样式(css var函数)
热门推荐
一只前端小菜鸟
01-21 2万+
改变样式是我们实际开发中最常做的事情。 诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。 诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。 那么，在vue中，我们更能很轻松的达到这点。 看下常见的几种情景： 情景一：我们需要根据某个变量是否存在（触发），去动态添加样式 描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果 <div ...
Vue 动态设置css伪元素content的值，解决不渲染和渲染为数字的问题
疑问 搜索 动手 解决 记录
09-27 1796
直接的赋值为数字的话或者在computed()计算属性中去做toString()依然是不会显示的，如果你在打开控制台时看到 --fraudScoreNum 的值仍然是数字 54，而不是字符串 ‘54’，那可能是因为浏览器对于 CSS 自定义属性的处理方式导致的。如果你想要确保 --fraudScoreNum 的值作为字符串类型传递给 content 属性，你可以在 Vue 模板中使用引号将其括起来。所以无论你是将 --fraudScoreNum 设置为 ‘54’ 还是 54，它们都可以被解析为数值 54。
Vue F05 -- 伪类元素
Toreme的博客
07-14 1555
Vue入门学习系列
Vue动态修改伪元素的样式和属性
前端卷王小白的博客
04-22 1273
vue动态修改伪元素的样式和属性,vue绑定样式,vue计算属性,vue监视属性,CSS的动态修改
vue修改:after伪元素样式
weixin_45264424的博客
08-02 2688
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="span2">hello earth</span> </div> </t
借Vue-iview样式修改，熟悉:before和:after伪类的用法
hum的博客
03-15 2645
需求：将下图中的tag右侧的小叉背景颜色改成边框颜色，只改变css ⇓ 由于没有vue环境（还没有系统学过vue哈哈哈哈哈……），朋友给我发了iview地址： https://www.iviewui.com/components/tag 直接在这里编辑样式吧~ 先上结果（画红框是修改部分）： ⇒ ⇒ OK，咱们来看下这块儿...
vue里css、伪元素使用data数据
freeshu的博客
11-24 1714
第一种 //如果要在动态样式后面接着写样式，要用逗号隔开 <view class="view-body " :style="{background:colorBG,height: '40rpx'}"> </view> data(){ return { colorBG:'red', //定义变量，v-bind绑定,变量一定是字符串的形式 } }, methods:{ csh: function() { _this.colorBG='yellow' ; //在需要
vue组件利用css var(--变量)实现动态修改伪类属性（::before、::after）
你好！刘斩仙
01-21 1万+
如图所示： #1： 我们可以利用此属性实现vue组件动态传值，修改例如：::before、::after等，伪类的背景色，背景图等属性值。 因为vue利用无法直接在css中使用data里的变量，利用var(–变量名),以及style中定义变量（其实此步是模仿:root{}）方能修改。 动态切换主题也可利用此方式实现，由后端返回图片地址，以及颜色主题。 #2： 常规使用方式，但是很尴尬，人们并不喜欢这样写。 只有系统性，需要大量修改重复css属性，才会用到这个。 代码如下：（复制另存txt，修改.html直
vue自定义下拉框样式
05-27
你可以使用以下步骤来自定义Vue下拉框的样式： 1.创建一个Vue组件来显示下拉框。可以使用v-model指令来绑定选中的值。 2.使用CSS样式来自定义下拉框的外观。可以使用伪元素和CSS属性来实现下拉框的箭头和选项列表的样式。 3.为下拉框组件添加事件监听器，以便在用户选择选项时更新选中的值。 下面是一个简单的Vue下拉框组件示例，你可以参考它来进行自定义样式： ``` <template> <div class="custom-select" :class="{ open: isOpen }"> <div class="selected" @click="toggleDropdown">{{ selected }}</div> <ul class="options" v-show="isOpen"> <li v-for="option in options" :key="option.value" @click="selectOption(option)">{{ option.label }}</li> </ul> </div> </template> <script> export default { props: { options: { type: Array, required: true }, value: { type: String, required: true } }, data() { return { isOpen: false, selected: '' } }, computed: { selectedOption() { return this.options.find(option => option.value === this.value) } }, mounted() { this.selected = this.selectedOption.label }, methods: { toggleDropdown() { this.isOpen = !this.isOpen }, selectOption(option) { this.selected = option.label this.$emit('input', option.value) this.isOpen = false } } } </script> <style> .custom-select { position: relative; width: 200px; } .selected { padding: 10px; background-color: #fff; border: 1px solid #ccc; cursor: pointer; } .selected::after { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 6px solid transparent; border-top-color: #000; } .options { position: absolute; top: 100%; left: 0; width: 100%; max-height: 200px; overflow-y: auto; background-color: #fff; border: 1px solid #ccc; z-index: 1; } .options li { padding: 10px; cursor: pointer; } .options li:hover { background-color: #f2f2f2; } .open .selected::after { border-top-color: #fff; } </style> ``` 在上面的示例中，我们使用CSS样式来创建自定义下拉框的外观。箭头使用伪元素和CSS属性来实现，选项列表使用CSS属性来设置最大高度和滚动。 在Vue组件中，我们使用v-for指令来循环渲染选项列表，并使用v-show指令来控制选项列表的显示和隐藏。在事件处理程序中，我们使用$emit方法来触发input事件，以便父组件可以获取选中的值。 希望这能帮助到你！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值