Question

我有一幅图像，我正在绑定源以提取动态数据：

 <img :src="'/public/images/' + media.client.name + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >

media.client.name返回的字符串包含％20而不是空格。

我创建了一个过滤器：

removeSpecial(value) {
  return value.replace("%20", " ");
}

请问如何在源数据绑定中使用此过滤器？

我尝试过：

 <img :src="'/public/images/' + media.client.name | removeSpecial + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >

和

 <img :src="'/public/images/' + {{ media.client.name | removeSpecial }} + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext " alt >

似乎都无法正常工作。

Answer 1

您可以制作将返回准备好的url计算方法的方法，如下所示：

imageUrl(media){
  return '/public/images/' + media.client.name.replace("%20", " ") + '_' + media.client.id + '/' + media.type + '/' + media.fileName + '.' + media.ext;
}

或者如果在数据中分配了媒体，则可以使用计算方法，该方法将返回相同的URL

computed: {
 imageUrl(){
  return '/public/images/' + this.media.client.name.replace("%20", " ") + '_' + this.media.client.id + '/' + this.media.type + '/' + this.media.fileName + '.' + media.ext;
 }
}

Answer 2

这取决于您要如何解码URI组件。如果此media数据是动态填充的（我想是这样），则可以创建一种用于对其进行解析和解码的方法（请参见下面的示例）。但是，如果您需要将此解码器用作filter，请参见以下文档摘录：

过滤器应该附加到JavaScript表达式的结尾，以“竖线”符号表示。

因此，最好的选择是使用computed属性，以便可以“管道”它。是的，您可以将本机方法decodeURIComponent()用于此确切目的。

方法1：仅方法

new Vue({
  el: '#app',

  data() {
    return {
      rootPath: '/public/images/',

      media: {
        client: {
          name: 'Music%20file%20with%20spaces',
          id: 123
        },
        type: 'music-file',
        fileName: 'some_music',
        ext: 'mp3'
      }
    }
  },

  methods: {
    getImgSource(media) {
      // Destructures the properties for improved readability.
      const { client, type, fileName, ext } = media;
      const { name, id } = client;
      
      // Uses template literals. Particularly useful for this situation
      // where you have several, unique delimiters.
      // Helps you see clearer how each of these URI components is combined.
      return `${this.rootPath}${decodeURIComponent(name)}_${id}/${type}/${fileName}.${ext}`;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- Commented out for demo purposes, because I don't have the file.
  <img :src="getImgSource(media)" :alt="media.fileName" /> -->
  
  <!-- Let's assume this is an image element -->
  <div v-text="getImgSource(media)"></div>
</div>

方法2：计算属性+过滤器

new Vue({
  el: '#app',

  data() {
    return {
      rootPath: '/public/images/',

      media: {
        client: {
          name: 'Music%20file%20with%20spaces',
          id: 123
        },
        type: 'music-file',
        fileName: 'some_music',
        ext: 'mp3'
      }
    }
  },

  computed: {
    mediaFile() {
      const { client, type, fileName, ext } = this.media;
      const { name, id } = client;
      
      return `${this.rootPath}${name}_${id}/${type}/${fileName}.${ext}`;
    }
  },
  
  filters: {
    decodeName: window.decodeURIComponent
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- Let's assume this is an image element -->
  <div>{{ mediaFile | decodeName }}</div>
</div>

希望有帮助。

Vuejs筛选器字符串替换

2 个答案:

方法1：仅方法

方法2：计算属性+过滤器