Javascript Vue.js-有没有更优雅的方式来有条件地应用类？

我有下面的vue实例，它有一个方法可以有条件地返回一些html标记。正如您所看到的，每个条件的标记都是相同的，只应用了不同的样式

有没有更优雅的方法达到同样的效果？我也应该使用方法、计算属性或组件来实现这一点——如果我应该使用计算属性，如何传递值以进行计算

有人知道其他方法吗

<div v-for="item in items">
    <div v-if="!_.isEmpty(item.files)">
        <ul >
            <li v-for="file in item.files">
                <span v-html="fileIcon(file.fileExtension)"></span>
            </li>
        </ul>
   </div>
</div>


 var vm =  new Vue({
        el: '#root',
        data: {
           items: [
                    {
                      "id": 126,
                      "content": "blah...",
                      "files": [
                           {
                              "id": 8,
                              "filename": "test.doc",
                              "fileExtension": "doc"
                           }
                       ]
                    },
                    {
                      "id": 127,
                      "content": "blah...",
                      "files": []
                    }
            ]
         },
         methods: {
            fileIcon: function (extension) {

                var str;

                switch (extension)
                {
                    case "jpg":
                    case "jpeg":
                    case "png":
                    case "gif":
                        str = "<i class='fa fa-file-image-o file-picture'></i>";
                        break;
                    case "pdf":
                        str = "<i class='fa fa-file-pdf-o file-pdf' ></i>";
                        break;
                    case "xls":
                    case "xlsx":
                        str = "<i class='fa fa-file-excel-o file-excel' ></i>";
                        break;
                    case "doc":
                    case "docx":
                        str = "<i class='fa fa-file-word-o file-word' ></i>";
                        break;
                    default:
                        str = "<i class='fa fa-file-file-o file-empty' ></i>";
                        break;
                }

                return str;
            }

        }
 });

var vm=新的Vue({
el:'根'，
数据：{
项目：[
{
“id”：126，
“内容”：“废话……”，
“文件”：[
{
“id”：8，
“文件名”：“test.doc”，
“文件扩展名”：“文档”
}
]
},
{
“id”：127，
“内容”：“废话……”，
“文件”：[]
}
]
},
方法：{
文件图标：函数（扩展名）{
var-str；
交换机（分机）
{
案例“jpg”：
案例“jpeg”：
案例“png”：
案例“gif”：
str=“”；
打破
案例“pdf”：
str=“”；
打破
案例“xls”：
案例“xlsx”：
str=“”；
打破
案例“doc”：
案例“docx”：
str=“”；
打破
违约：
str=“”；
打破
}
返回str；
}
}
});

---

请注意，我对Vue非常陌生，因此希望能提供一些代码片段作为指导

我认为您不需要/不应该将v-html用于此类内容

您只需要设置一个映射，将类型链接到类

定义对象

let icons = {
  jpg: ['fa-file-image-o', 'file-picture'],
  jpeg: ['fa-file-image-o', 'file-picture'],
  png: ['fa-file-image-o', 'file-picture'],
  gif: ['fa-file-image-o', 'file-picture'],
  pdf: ['fa-file-pdf-o', 'file-pdf'],
  xls: ['fa-file-excel-o', 'file-excel'],
  xlsx: ['fa-file-excel-o', 'file-excel'],
  doc: ['fa-file-word-o', 'file-word'],
  docx: ['fa-file-word-o', 'file-word']
}

创建一个方法

fileIcon (type) {
  return icons[type] || ['fa-file-file-o', 'file-empty']
}

---

然后在模板中调用它。您可以使用方法返回类，请参见此代码笔：

有关更多信息，请参见此处：

理想情况下，您还可以将文件类型及其对应的类存储在

数据中，这将降低方法的复杂性


var vm=new Vue({
el:“#应用程序”，
数据：{
项目：[
{
“id”：126，
“内容”：“废话……”，
“文件”：[
{
“id”：8，
“文件名”：“test.doc”，
“文件扩展名”：“文档”
}
]
},
{
“id”：127，
“内容”：“废话……”，
“文件”：[]
}
]
},
方法：{
文件图标：函数（文件）{
var ext=file.fileExtension；
var-str；
交换机（分机）
{
案例“jpg”：
案例“jpeg”：
案例“png”：
案例“gif”：
str=“fa-file-image-o文件图片”；
打破
案例“pdf”：
str=“fa-file-pdf-o file pdf”；
打破
案例“xls”：
案例“xlsx”：
str=“fa-file-excel-o file excel”；
打破
案例“doc”：
案例“docx”：
str=“fa-file-word-o file-word”；
打破
违约：
str=“fa-file-file-o文件为空”；
打破
}
返回str；
}
}
});



{{file.filename}


我投了反对票，因为这是一个非常模糊的答案，应该是一个评论，现在我投了赞成票，因为它经过编辑，是一个完整的答案。