vuejs中v-for元素中的动态插值计算方法名称答案

【问题标题】：dynamic interpolation computed method name in v-for element in vuejsvuejs中v-for元素中的动态插值计算方法名称
【发布时间】：2020-05-27 16:18:17
【问题描述】：

在我的 vuejs 项目中，使用 ul li 和 v-for 指令 vuejs 创建一个列表元素，如下所示：

<ul>
    <li :class="{active: 'isActive+index'}" v-for="(car, index) in cars"></li>
</ul>

这些元素是动态的。有时是 2 有时是 3 或 4 个元素

但我需要为每个这样的特定逻辑活动类 css：

'isActive+index'

其中 this 表示动态计算名称（已经存在）。但显然这段代码不会运行并生成基本字符串单词而不是计算方法的链接。我想执行那些计算方法：

computed:
{
    isActive1: function ()
    {
        return myLogic
    },
    isActive2: function ()
    {
        return myLogic
    },
    isActive3: function ()
    {
        return myLogic
    },
    isActive4: function ()
    {
        return myLogic
    },
}

如何将元素与动态方法名称链接起来，以便使用 vuejs 计算执行？

【问题讨论】：

你能举出汽车数据的例子吗？myLogic里面有什么？也许有更好的方法来解决这个问题，而不是使用计算属性
汽车数据不是很重要，myLogic 只是返回 true 或 false 为活动或没有活动类 css 的逻辑。这个问题的主要问题是将动态名称插值到 v-for 元素中。
但是你为什么把你的逻辑放在一个类中呢？你不能只检查“活动”类的基础吗？
@darkomen 除非这些计算出来的 props 每个都有独特或非常具体的逻辑，否则我会说这种方法不太可扩展。为什么不使用方法呢？

标签： vue.js

【解决方案1】：

new Vue({
  el: '#app',
  template: `
    <div>
      <ul>
        <li v-for="(item, index) in cars" :key="index" :class="{ active: statusActive[index] }">
          <strong>Car:</strong> {{item.name}} ,      
        </li>
      </ul>

      <button @click="changeCars">Change cars</button>
    </div>
  `,
  data() {
    return {
      cars1: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
      ],
      cars2: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
        {
          name: "car4",
        },
      ],
      cars3: [{
          name: "car1",
        },
        {
          name: "car2",
        },
      ],
      carsIndex: 1,
    };
  },
  computed: {
    cars() {
      return this["cars" + this.carsIndex];
    },
    
    statusActive() {
      return {
        0: this.statusActive0,
        1: this.statusActive1,
        2: this.statusActive2,
        3: this.statusActive3,
      };
    },
    
    statusActive0() {
      return false;
    },
    
    statusActive1() {
      return true;
    },
    
    statusActive2() {
      return false;
    },
    
    statusActive3() {
      return true;
    },
  },
  methods: {
    changeCars() {
      if (this.carsIndex < 3) {
        this.carsIndex++;
      } else {
        this.carsIndex = 1;
      }
    },
  },
})

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

或

new Vue({
  el: '#app',
  template: `
    <div>
      <ul>
        <li v-for="(item, index) in cars" :key="index" :class="{ active: isActive(index) }">
          <strong>Car:</strong> {{item.name}} ,      
        </li>
      </ul>

      <button @click="changeCars">Change cars</button>
    </div>
  `,
  data() {
    return {
      cars1: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
      ],
      cars2: [{
          name: "car1",
        },
        {
          name: "car2",
        },
        {
          name: "car3",
        },
        {
          name: "car4",
        },
      ],
      cars3: [{
          name: "car1",
        },
        {
          name: "car2",
        },
      ],
      carsIndex: 1,
    };
  },
  computed: {
    cars() {
      return this["cars" + this.carsIndex];
    },
        
    statusActive0() {
      return false;
    },
    
    statusActive1() {
      return true;
    },
    
    statusActive2() {
      return false;
    },
    
    statusActive3() {
      return true;
    },
  },
  methods: {
    changeCars() {
      if (this.carsIndex < 3) {
        this.carsIndex++;
      } else {
        this.carsIndex = 1;
      }
    },
    
    isActive(index) {
      return this["statusActive" + index];
    },
  },
})

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

【讨论】：

OK 我需要使用数组来创建动态系统。感谢您的优质回复和示例！