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?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會(huì)詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯(cuò)過喲2021-09-09
探索Vue.js component內(nèi)容實(shí)現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下2021-11-11
詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
本篇文章主要介紹了vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue.js原理分析之nextTick實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?dòng)。本質(zhì)上就是一種對(duì)應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹，感興趣的小伙伴請(qǐng)和小編一起來學(xué)習(xí)吧2021-09-09
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07