vue 控制伪类元素的显示


<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这个类名就可以了

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
你可以使用以下步骤来自定义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、付费专栏及课程。

余额充值