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

Question

我有以下 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;
            }

        }
 });

请注意，我对 Vue 非常陌生，因此我们将不胜感激提供一些代码 sn-p 来指导。

Answer 1

我认为你不需要/不应该使用 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']
}

然后在模板中调用<span :class="fileIcon(file.fileExtension)">

Answer 2

您可以使用方法返回类，请参阅此代码笔：

https://codepen.io/huntleth/pen/POdGRL

查看这里了解更多信息：https://vuejs.org/v2/guide/class-and-style.html

理想情况下，您也可以将文件类型及其对应的类存储在data 中，这样可以降低方法的复杂性。

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

                var str;

                switch (ext)
                {
                    case "jpg":
                    case "jpeg":
                    case "png":
                    case "gif":
                        str = "fa fa-file-image-o file-picture";
                        break;
                    case "pdf":
                        str = "fa fa-file-pdf-o file-pdf";
                        break;
                    case "xls":
                    case "xlsx":
                        str = "fa fa-file-excel-o file-excel";
                        break;
                    case "doc":
                    case "docx":
                        str = "fa fa-file-word-o file-word";
                        break;
                    default:
                        str = "fa fa-file-file-o file-empty";
                        break;
                }

                return str;
            }

        }
 });

<div id="app">
  <div v-for="item in items">
    <div v-if="!_.isEmpty(item.files)">
        <ul >
            <li v-for="file in item.files">
                <i :class="fileIcon(file)">{{file.filename}}</i>
            </li>
        </ul>
   </div>
</div>
</div>