vue如何截取字符串
更新時間：2019年05月06日 09:55:36 作者：游1
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在后端有許多的封裝方法來截取字符串或者對字符串的操作，同樣前端也有相應(yīng)的方法。
有一個data數(shù)據(jù)為ipaddr
data() {
return {
ipaddr: "192.168.100.110",
};
},
1、現(xiàn)在需要切割成一個數(shù)組，得到四個ip值,只需要通過計算屬性就可以實現(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、替換字符。只需要將計算屬性中的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é)果如下，需要注意的是如果是特殊符號要添加 “\"轉(zhuǎn)義，否者會出錯。
3、截取某一段字符，同樣修改計算屬性，改成return this.ipaddr.substr(2,5)
意思為從第二個字符開始（應(yīng)該說是第三個，因為在數(shù)組中以0開始），截取長度為5的一串字符。
視圖效果：
4、截取某一段字符，修改計算屬性，改成return this.ipaddr.substring(2,6)
意思為從第二個字符開始（應(yīng)該說是第三個，因為在數(shù)組中以0開始）到第六個字符結(jié)束。
視圖效果：
以上所述是小編給大家介紹的vue如何截取字符串詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯過喲2021-09-09
探索Vue.js component內(nèi)容實現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實現(xiàn),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下2021-11-11
詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
本篇文章主要介紹了vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?。本質(zhì)上就是一種對應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹，感興趣的小伙伴請和小編一起來學(xué)習(xí)吧2021-09-09
vue-router二級導(dǎo)航切換路由及高亮顯示的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級導(dǎo)航切換路由及高亮顯示的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07