如何在 vue.js 中替换斜线

Question

我的代码有点问题：

<template slot="popover">
  <img :src="'img/articles/' + item.id + '_1.jpg'">
</template>

我的一些 item.id 编号中有一个斜线。因此，某些图像无法显示。现在，如果 item.id 编号中出现斜线，我想用下划线替换斜线或将其删除。有没有简单的解决方案？

斜线应该只在代码中的这一点被替换，而不是在使用 item.id 的其他地方。

Answer 1

您可以使用计算属性并将斜杠替换为 replace 和正则表达式：

<template slot="popover">
  <img :src="`img/articles/${itemId}_1.jpg`">
</template>

<script>
...
  computed: {
    itemId: function(){
        return this.item.replace(/\//g, '-');
    }
  }
...
</script>

这是一个测试小提琴：https://jsfiddle.net/pqfvba6n/

Answer 2

使用replace (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)

<template slot="popover">
  <img :src="'img/articles/' + item.id.replace(/\//g, '_') + '_1.jpg'">
</template>