vue如何截取字符串
在后端有許多的封裝方法來截取字符串或者對(duì)字符串的操作，同樣前端也有相應(yīng)的方法。
有一個(gè)data數(shù)據(jù)為ipaddr
data() {
return {
ipaddr: "192.168.100.110",
};
},
1、現(xiàn)在需要切割成一個(gè)數(shù)組，得到四個(gè)ip值,只需要通過計(jì)算屬性就可以實(shí)現(xiàn)
computed：{
ipaddrArray：function(){
return this.ipaddr.split('.')
}
}
最終通過ul可以展現(xiàn)切割的字符串
<template>
<ul>
<li v-for="item in ipaddrArray" :key="item">{{item}}</li>
</ul>
</template>
展示的結(jié)果如下
2、替換字符。只需要將計(jì)算屬性中的return值修改即可,如下，將 ‘.' 修改成 '-‘
computed：{
ipaddrArray：function(){
return this.ipaddr.replace(/\./g,'-')
}
}
在界面展示
<template>
<ul>
<!--<li v-for="item in ipaddrArray" :key="item">{{item}}</li>-->
</ul>
{{ipaddrArray}}
</template>
展示結(jié)果如下，需要注意的是如果是特殊符號(hào)要添加 “\"轉(zhuǎn)義，否者會(huì)出錯(cuò)。
3、截取某一段字符，同樣修改計(jì)算屬性，改成return this.ipaddr.substr(2,5)
意思為從第二個(gè)字符開始（應(yīng)該說是第三個(gè)，因?yàn)樵跀?shù)組中以0開始），截取長度為5的一串字符。
視圖效果：
4、截取某一段字符，修改計(jì)算屬性，改成return this.ipaddr.substring(2,6)
意思為從第二個(gè)字符開始（應(yīng)該說是第三個(gè)，因?yàn)樵跀?shù)組中以0開始）到第六個(gè)字符結(jié)束。
視圖效果：
以上所述是小編給大家介紹的vue如何截取字符串詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
什么是vue.js事件處理器？這篇文章主要介紹了vue.js事件處理器的相關(guān)資料2017-03-03
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue下載Excel后報(bào)錯(cuò),或打不開的解決
這篇文章主要介紹了Vue下載Excel后報(bào)錯(cuò),或打不開的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來引用子組件,然后通過$refs來訪問子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue中post請(qǐng)求報(bào)400的解決方案
這篇文章主要介紹了vue中post請(qǐng)求報(bào)400的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Vue的異步組件加載的實(shí)現(xiàn)方法小結(jié)
在 Vue 中,異步組件是指那些在需要時(shí)才會(huì)被加載的組件,與傳統(tǒng)的靜態(tài)組件不同,異步組件通過動(dòng)態(tài)加載的方式,可以有效地減少初始加載的資源和時(shí)間,在 Vue 中實(shí)現(xiàn)異步組件加載非常簡(jiǎn)單,開發(fā)者有多種方法可以做到,本文給大家介紹了一些常用的實(shí)現(xiàn)方法2024-11-11
詳解Vue3中的watch偵聽器和watchEffect高級(jí)偵聽器
這篇文章主要介紹了Vue3中的watch偵聽器和watchEffect高級(jí)偵聽器,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08