Vue.js 如何从 vfor 创建的对象中绑定多个类

    <ul>
      <li class="aaa active">text-aaa</li>
      <li class="bbb">text-bbb</li>
      <li class="ccc">text-ccc</li>
    </ul>

    <div id="app">
      <ul>
        <li v-for="v, i in listAry" :class="{v.name:true,active:active==i}">{{ v.text }}</li>
      </ul>
    </div>

   
script:

    let vm = new Vue({
      el: "#app",
      data: {
        active:0,
        listAry: [{
          name: 'aaa',
          text: 'text-aaa'
        }, {
          name: 'bbb',
          text: 'text-bbb'
        }, {
          name: 'ccc',
          text: 'text-ccc'
        }]
      }
    })

<div id="app">
  <ul>
    <li v-for="v, i in listAry" :class="[{ active: active === i }, v.name]">
      {{ v.text }}
    </li>
  </ul>
</div>

Vue.js相关问答推荐

Vuetify 2中自定义标头的排序和筛选

Vue3外部数组的响应性

视图中的 vue 样式不适用于 html

Nuxt 和 Vite 有什么区别？

将媒体源/流绑定到视频元素 - Vue 3 组合 API

我可以在打印 HTML 页面时使用作用域 CSS 吗？ (使用 Laravel 和 Vue.js)

Rails Webpacker 还是 Vue-CLI？

VuetifyJS：如何摆脱 v-stepper 组件的提升？

运行vue-cli-service build --watch时没有 CSS 文件

vue js 组件中的 this.$route 只返回 undefined

如何在不实例化根实例的情况下使用 vue 组件？

单击复选框后，V-model 未更新

如何在 Node.js 服务器上部署 Vue.js 应用程序

Vuetify 输入自动完成错误

未捕获的类型错误：c.querySelectorAll 不是函数

如何在 VueJS 中访问 [__ob__： Observer] 的元素？

如何在 Vue 中转发 $refs

在 vue/vuex(/flux？) 中使用 ES6 类是一种反模式吗？

我可以使用react路由创建别名路由吗？

mount() 仅在组件 Vue.js 上运行一次