vue项目中less的样式用data中的数值

robotkirin

于 2023-06-26 17:21:09 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js less javascript

本文链接：https://blog.youkuaiyun.com/robotkirin/article/details/131401929

这段代码展示了在Vue.js应用中如何使用HTML、JS和LESS来动态改变元素的样式。`<div>`内的`<li>`元素通过`v-for`指令遍历`monthList`，并根据`activeIndex`的值应用不同的CSS变量`--radius`，实现背景色变化和边框圆角效果。当`activeIndex`为1时，边框圆角设置为`6px06px`，为12时为`06px6px0`，默认情况下边框圆角设为`0`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

    <div class="change">
            <li
          :class="{ active: activeIndex === item }"
          v-for="item in monthList"
          :key="item"
          @click="activeIndex = item"
          :style="myStyle"
        >
          {{ item }}个月
        </li>
      </div>

JS代码

data() {
    return {
      activeIndex: 1,
    }
  },
  computed: {
    myStyle() {
      switch (this.activeIndex) {
        case 1:
          return {
            '--radius': '6px 0 0 6px',
          }
        case 12:
          return {
            '--radius': '0 6px 6px 0',
          }

        default:
          return {
            '--radius': '0 0 0 0',
          }
      }
    },
  },

LESS代码

.active {
        background: #30b27a;
        color: var(--unnamed, #fff);
        border-radius: var(--radius);
      }