Question

这是我的for循环：

      <tr v-for="doc in documents">
        <th></th>
        <th><a href="javascript:void(0)" @click="getChildDocs(doc.id)" :title="doc.type"><i class="fas fa-doc.type fa-lg"></i></a></th>
        <td>{{ doc.name }}</td>
      </tr>

我有一个doc.type，它是文件夹或文件。我想动态更改fa图标，例如将fa-与doc.type串联。有可能吗？

Answer 1

使用绑定和方法返回格式化的类名。

模板： <i :class="getClassName(doc.type)"></i>

Vue-

使用方法：

...
methods: {
   getClassName(type){
      return 'fas fa-' + type + ' fa-lg';
   }
}

或使用计算属性：

...
computed: {
   getClassName() {
      return type => `fas fa-${doc.type} fa-lg`;
   }
}

替代方法是执行以下操作（如果使用ES6 +）：

<i :class="`fas fa-${doc.type} fa-lg`"></i>

Answer 2

尝试这样的事情：

在此处阅读https://vuejs.org/v2/guide/class-and-style.html

Answer 3

有很多方法可以实现这一目标，这是一种：

data() {
  return {
    iconTypes: {
      'folder': 'fa-folder',
      'file': 'fa-file'
    }
  }
},

methods: {
  executeCommand(doc) {
    if (doc.type === 'file') {
      this.$emit('file-event-handler', any_arguments_here);
      // or simply this.doSomething(doc)
    }

    // or use a switch here
  }

}

<a href="#" @click.prevent="executeCommand(doc)"
  <i class="[ 'fas fa-lg', iconTypes[doc.type] ] "></i>
</a>

动态类在v-for循环中串联

3 个答案: