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 相关文章推荐
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
js+html实现点名系统功能
Nov 05 Javascript
基于vue.js实现购物车
Jan 15 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
关于尾递归的使用详解
2013/05/02 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python中的pack和unpack的使用
2018/03/12 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python登录系统界面实现详解
2019/06/25 Python
python django生成迁移文件的实例
2019/08/31 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
国旗下讲话演讲稿
2014/05/08 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
2015年项目工作总结
2015/04/29 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
python数字转对应中文的方法总结
2021/08/02 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js