vue.js - vuejs中v-for元素中的动态插值计算方法名称

Question

在我的项目 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'

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

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

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

标签： vue.js

Answer 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>