您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“VUE +Element怎么實(shí)現(xiàn)多個字段值拼接功能”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
效果截圖:
VUE 核心功能代碼片段:
//獲取公共通知列表 getUsers() { let para = { page: this.page, title: this.filters.title }; this.listLoading = true; //NProgress.start(); getNoticeListPage(para).then((res) => { this.total = res.data.total; let str = '' for(let i =0; i < res.data.notices.length; i++) { str = res.data.notices[i].startDt + '~' + res.data.notices[i].endDt; res.data.notices[i].timeRang = str } this.notices = res.data.notices; this.listLoading = false; //NProgress.done(); }); },
總結(jié):定義常量str, 遍歷后臺返回?cái)?shù)據(jù),常量str 的賦值表達(dá)式是:
str = res.data.notices[i].startDt + '~' + res.data.notices[i].endDt;
再向res.data.notices 數(shù)組對象中設(shè)置新的屬性值,并賦值:
res.data.notices[i].timeRang = str
補(bǔ)充:下面看下vue各種字符串拼接方法
1、文件綁定{undefined{}}中的字符串拼接:直接在{undefined{}}內(nèi)拼接:
<template v-if="userList"> <div v-for="(item,index) in userList" :key="index"> {{item.userName+'('+item.userAccount+')'}} </div> </template> <el-option v-for="item in projectList" :key="item.pNo" :label='`${item.name}-${item.managerName}(${item.managerAccount})`' :value="item.pNo" > </el-option>
2、vue標(biāo)簽屬性綁定中的字符串拼接:寫法有兩種::title="`字符串${xx}`" 或 :title="'字符串' + xx" 都可以。其中,{}里面可以寫js方法。如:
<el-option v-for="item in tableData" :key="item.account" :label= '`${item.name}${item.account}`' :value="item.account" :height = "schoolHeight"> </el-option> <el-submenu v-show="item.childList.length > 0" :index="item.id" :class='`menu${item.id}`'> <span :class="{ red: originData[`${item.value}ChangeFlag`] }">{{ item.text }}</span>
3、js中的字符串拼接:
this.personList.forEach(item => { item.label = `${item.userName}(${item.account})`; }); this.$bus.$emit(`${this.activeName}-reload`, this.searchData); switchStatus(row) { this.$Modal.confirm({ title: '提示', content: `是否確認(rèn)切換狀態(tài)為${row.isDelete === 1 ? '否' : '是'}?`, onOk: () => { row.isDelete = row.isDelete === 0 ? 1 : 0; } }); },
“VUE +Element怎么實(shí)現(xiàn)多個字段值拼接功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。