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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
JS中递归函数
Jun 17 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
php类常量的使用详解
2013/06/08 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
用Python编写简单的定时器的方法
2015/05/02 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python编写分类决策树的代码
2017/12/21 Python
Python代码需要缩进吗
2020/07/01 Python
Python如何合并多个字典或映射
2020/07/24 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
销售自我评价
2013/10/22 职场文书
程序员岗位职责
2013/11/11 职场文书
光盘行动倡议书
2014/02/02 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
计算机专业自荐信
2015/03/05 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
红色电影观后感
2015/06/18 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
python如何利用cv2模块读取显示保存图片
2021/06/04 Python