快捷導(dǎo)航

vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加

更新時(shí)間：2023年08月03日 10:59:45 作者：我的一個(gè)道姑朋友

這篇文章主要為大家介紹了vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加逗號(hào)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

數(shù)組元素后面加一個(gè)逗號(hào)，最后一個(gè)數(shù)組元素不加

最近在開發(fā)一個(gè)功能：后端返回的列表要求每一個(gè)數(shù)組元素后面加一個(gè)逗號(hào)，最后一個(gè)數(shù)組元素不加,該場(chǎng)景是用在表格中，鼠標(biāo)移入某一個(gè)表格項(xiàng)，toast提示那一項(xiàng)的詳細(xì)，

代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>js實(shí)現(xiàn)數(shù)組渲染時(shí)，在每個(gè)值后面加逗號(hào)，最后一個(gè)值不加</title>
  <!--引入 element-ui 的樣式，-->
  <link rel="stylesheet" >
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的組件庫-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      margin: 100px;
    }
  </style>
</head>
<body>
  <div id="app">
    <span v-for="(item, index) in arr" :key="index">{{item}}</span>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 模擬后端返回的數(shù)組
          arr: [
            "測(cè)試1",
            "測(cè)試2",
            "測(cè)試3",
            "測(cè)試4",
            "測(cè)試5"
          ],
        }
      },
      created() {
        this.arr = this.arr.map((item, index) => {
          // 最后一個(gè)值不加
          if (index !== this.arr.length - 1) {
            return item + '， '
          }
          return item
        })
        console.log(this.arr, 'arr')
      },
      methods: {
      }
    })
  </script>
</body>
</html>

效果

主要原理就是利用map循環(huán)，給每一個(gè)item拼接一個(gè)逗號(hào)，但是需要在拼接前面加一個(gè)該item不是最后一個(gè)的判斷,最后return改造后的item

以上就是vue頁面渲染數(shù)組中數(shù)據(jù)文案后添加逗號(hào)最后不加的詳細(xì)內(nèi)容，更多關(guān)于vue頁面渲染數(shù)據(jù)加逗號(hào)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

利用Vue實(shí)現(xiàn)簡易播放器的完整代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡易播放器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
vue利用better-scroll實(shí)現(xiàn)輪播圖與頁面滾動(dòng)詳解
在我們?nèi)粘５捻?xiàng)目開發(fā)中，處理滾動(dòng)和輪播圖是再常見不過的需求了，下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實(shí)現(xiàn)輪播圖與頁面滾動(dòng)的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。
2017-10-10
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue項(xiàng)目服務(wù)器部署之子目錄部署方法
在本文中我們給大家整理了關(guān)于Vue項(xiàng)目服務(wù)器部署之子目錄部署方法和具體步驟，需要的朋友們參考下。
2019-05-05
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
Webpack+Vue如何導(dǎo)入Jquery和Jquery的第三方插件
本文主要介紹了Webpack+Vue導(dǎo)入Jquery和Jquery的第三方插件的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
Vue基于localStorage存儲(chǔ)信息代碼實(shí)例
這篇文章主要介紹了Vue基于localStorage存儲(chǔ)信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
解決Vue項(xiàng)目Network:?unavailable的問題
項(xiàng)目只能通過Local訪問而不能通過Network訪問,本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問題,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-06-06