vue3.0,element为基础编写单击li标签后保持active css样式的代码

在Vue 3.0中，您可以使用v-bind:class指令和:active伪类来实现此效果。下面是一个示例代码：

<template>
  <div>
    <ul>
      <li :class="{ active: isActive }" @click="toggleActive">Item 1</li>
      <li :class="{ active: isActive }" @click="toggleActive">Item 2</li>
      <li :class="{ active: isActive }" @click="toggleActive">Item 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style>
li:active {
  background-color: yellow;
}
.active {
  background-color: blue;
  color: white;
}
</style>

在这个例子中，我们定义了一个isActive属性，它用于切换li标签的active样式。我们使用v-bind:class指令将active类与isActive属性绑定，这样当isActive为true时，li标签就会具有active类。我们还在li:active伪类中定义了一个背景颜色，当用户单击li标签时，它会呈现黄色背景。最后，我们还定义了一个.active样式，这样当li标签处于活动状态时，它们将具有蓝色背景和白色文字颜色。