如何只得到第一个被|分割的句子在vuejs中显示

Question

在我的资产 table 中有一个存储图像名称的图像列。它将存储多个图像并按 |

分割

在我的 vue.js table 中，我设法将其显示为屏幕截图

这是我的代码

<tbody v-if="assets.data && assets.data.length > 0">
  <tr v-for="asset,id in assets.data">
          <td class="text-center">{{ assets.first_item + id }}</td>
          <td class="text-center">{{asset.image}}</td>
 </tr>

如何只得到第一句话？我只想显示第一个图像名称。

Answer 1

您可以使用字符串 split() 方法根据 '|' 拆分字符串，这将为您提供拆分元素的数组，然后您可以访问第一个元素。

工作演示：

var app  = new Vue({
  el: "#app",
  data: {
    assets: {
        data: [{
        id: 1,
        image: 'image1.png|image2.png|image3.png'
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table">
    <tbody v-if="assets?.data?.length > 0">
      <tr v-for="(asset, index) in assets.data" :key="index">
        <td class="text-center">{{asset.image.split('|')[0]}}</td>
      </tr>
    </tbody>
  </table>
</div>

希望它能按要求工作。

如何只得到第一个被|分割的句子在vuejs中显示

How to get only the first sentence splitted by | to display in vuejs

arrays

split

vue.js