您好,登錄后才能下訂單哦!
在后端有許多的封裝方法來截取字符串或者對字符串的操作,同樣前端也有相應的方法。
有一個data數據為ipaddr
data() { return { ipaddr: "192.168.100.110", }; },
1、現在需要切割成一個數組,得到四個ip值,只需要通過計算屬性就可以實現
computed:{ ipaddrArray:function(){ return this.ipaddr.split('.') } }
最終通過ul可以展現切割的字符串
<template> <ul> <li v-for="item in ipaddrArray" :key="item">{{item}}</li> </ul> </template>
展示的結果如下
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>
展示結果如下,需要注意的是如果是特殊符號要添加 “\"轉義,否者會出錯。
3、截取某一段字符,同樣修改計算屬性,改成return this.ipaddr.substr(2,5)
意思為從第二個字符開始(應該說是第三個,因為在數組中以0開始),截取長度為5的一串字符。
視圖效果:
4、截取某一段字符,修改計算屬性,改成return this.ipaddr.substring(2,6)
意思為從第二個字符開始(應該說是第三個,因為在數組中以0開始)到第六個字符結束。
視圖效果:
以上所述是小編給大家介紹的vue如何截取字符串詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。