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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
用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缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python实现井字棋游戏
2020/03/30 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python安装pil库方法及代码
2019/06/25 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
个人授权委托书范本
2014/04/03 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
java基础——多线程
2021/07/03 Java/Android
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
python turtle绘图
2022/05/04 Python