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ù)組元素不加,該場景是用在表格中，鼠標(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: [
"測試1",
"測試2",
"測試3",
"測試4",
"測試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)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue修改項(xiàng)目啟動(dòng)端口號(hào)方法
今天小編就為大家分享一篇Vue修改項(xiàng)目啟動(dòng)端口號(hào)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue事件總線的使用問題及解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會(huì)重復(fù)獲取之前的值需要手動(dòng)強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要介紹了vue?tree封裝一個(gè)可選的樹組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了element-ui之解決select無法回顯的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04