vue如何截取字符串


Posted in Javascript onMay 06, 2019

在后端有许多的封装方法来截取字符串或者对字符串的操作,同样前端也有相应的方法。

有一个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>

展示的结果如下

vue如何截取字符串

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>

展示结果如下,需要注意的是如果是特殊符号要添加 “\"转义,否者会出错。

vue如何截取字符串

3、截取某一段字符,同样修改计算属性,改成return this.ipaddr.substr(2,5)

    意思为从第二个字符开始(应该说是第三个,因为在数组中以0开始),截取长度为5的一串字符。

视图效果:

vue如何截取字符串

4、截取某一段字符,修改计算属性,改成return this.ipaddr.substring(2,6)

意思为从第二个字符开始(应该说是第三个,因为在数组中以0开始)到第六个字符结束。

视图效果:

vue如何截取字符串

以上所述是小编给大家介绍的vue如何截取字符串详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
深入理解vuex2.0 之 modules
Nov 20 Javascript
用vscode开发vue应用的方法步骤
May 06 #Javascript
微信小程序合法域名配置方法
May 06 #Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 #Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
10款最好的Python开发编辑器
2019/07/03 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
经典大学生求职信范文
2014/01/06 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
暑假打工感想
2015/08/07 职场文书
导游词之无锡梅园
2019/11/28 职场文书