vue如何截取字符串

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

有一个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如何截取字符串详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue中如何实现变量和字符串拼接

    vue中如何实现变量和字符串拼接

    整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享. 在data中定义变量: data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢? <button @click='showMsg'></button> //vue methods: { showMsg() { alert(`获取了${a}`); } } 注意alert()里不是单引号,而是两个 ` 号(esc下面的按键). 点击按钮出现 以上就是本文

  • vue语法之拼接字符串的示例代码

    vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue项目base64字符串转图片的实现代码

    <img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

  • Vue.js 时间转换代码及时间戳转时间字符串

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()

  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给

  • Vue 将后台传过来的带html字段的字符串转换为 HTML

    Vue 将后台传过来的带html字段的字符串转换为 HTML

    后台传过来 一个带标签的字符串  前端可以直接转换成html格式的,可是在vue中怎么办呢 在这个DEMO中,item.content所带的字符串将被转换为HTML代码. 注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html="item.content"> {{item.content}}

  • Vue中的字符串模板的使用

    1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在js字符串中定义的模板. 2.Props属性:HTML 特性是不区分大小写的.所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名): (1).HTM

  • vue中将html字符串转换成html后遇到的问题小结

    今天整理之前做vue项目时遇到的一些问题,发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思,听我慢慢给你到来),这个问题就是当时处理后端数据时,如何将后端返回来的字符串转换成html标签,其实根据vue官网的一个v-html方法是不是觉得很简单,当时我也是这样想的,可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了,在这里我只是用它来渲染数据): 第一,当我用v-html将后端字符串转换成了html标签后,发现我在那个字符串中解

  • vue如何截取字符串

    在后端有许多的封装方法来截取字符串或者对字符串的操作,同样前端也有相应的方法. 有一个data数据为ipaddr data() { return { ipaddr: "192.168.100.110", }; }, 1.现在需要切割成一个数组,得到四个ip值,只需要通过计算属性就可以实现 computed:{ ipaddrArray:function(){ return this.ipaddr.split('.') } } 最终通过ul可以展现切割的字符串 <template&g

  • Thinkphp模板中截取字符串函数简介

    在php中截取字符串的函数有很多,而在thinkphp中也可以直接使用php的函数,本文给大家简单的介绍thinkPHP模板中截取字符串的具体用法,希望能对各位有所帮助. 对于英文字符可使用如下形式: 复制代码 代码如下: {$vo.title|substr=0,5} 如果是中文字符thinkphp提供了msubstr,用法如下: 复制代码 代码如下: function msubstr($str, $start=0, $length, $charset="utf-8″, $suffix=true

  • 正则表达式截取字符串的方法技巧

    有这么一段字符串: [数字]字符串 结果 取  a=数字 b=字符串 截取方法1: int a = Convert.ToInt32(txt1.Text.Trim().Replace('[', ']').Split(']')[1]); string b = txt1.Text.Trim().Replace('[', ']').Split(']')[2]; 截取方法2: string str = "[数字]字符串"; Regex reg = new Regex(@" ([^]+)

  • C#几种截取字符串的方法小结

    1.根据单个分隔字符用split截取 例如 复制代码 代码如下: string st="GT123_1"; string[] sArray=st.split("_"); 即可得到sArray[0]="GT123",sArray[1]="1"; 2.利用多个字符来分隔字符串 例如 复制代码 代码如下: string str = "GTAZB_JiangjBen_123";string[] sArray = s

  • 用javascript实现截取字符串包含中文处理的函数

    1.substring 方法 定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数 描述 start 必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop 可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. 返回值 一个新的字符串,该字符串值包

  • JavaScript利用split函数按规定截取字符串(获取邮箱用户名)

    一个JavaScript基础技巧,根据一串字串中规定的字符,获取该字符以左或以右的字符串,以本例中的电子邮箱为例,它可以获取邮箱的用户名,而将用户名以外的字符抛弃掉,本实例应该是比较实用的. JavaScript截取字符串 function x(){ var x=document.getElementById("x").value.toString(); var c=x.split("@"); document.getElementById("x"

  • js截取字符串功能的实现方法

    js截取字符串2种方式:substring().slice(),供大家参考,具体内容如下 这里给出的例子是时间. css文件: body{ text-align:center} .con{ margin:100px auto; width:800px; height:400px; border:2px solid #336666; border-radius:5px; padding-top: 50px; } <!DOCTYPE html> <html> <head>

  • SQL截取字符串函数分享

    A.截取从字符串左边开始N个字符 Declare @S1 varchar(100) Select @S1='http://www.xrss.cn' Select Left(@S1,4) ------------------------------------ 显示结果: http B.截取从字符串右边开始N个字符(例如取字符www.163.com) Declare @S1 varchar(100) Select @S1='http://www.163.com' Select right(@S1,

  • 批处理BAT替换与截取字符串的用法t1=%a:~3%是什么意思

    一.替换用法 例 复制代码 代码如下: @echo off set a=belcome to CMD borld! set temp=%a:b=w% echo %temp% pause 将显示 welcome to CMD world! 即用w替换了变量a中的b. 二.截取用法 字符串最前面的光标所在处表示第0位,第一个字符后面的光标所在表示第一位,依次类推. 为了更好的理解截取用法,下面给出了字符串superhero位数的相关示意图: s u p e r h e r o 0 1 2 3 --

  • Java截取字符串的方法

    本文实例讲述了Java截取字符串的方法.分享给大家供大家参考.具体实现方法如下: public static void main(String args[]) { //以该字符第一次出现,开始截取 //String str="abc.def"; //String str="abc.def.sdfsdf.fsdfd.ddddd.ggggg.ttttt"; //String str1=str.substring(str.indexOf(".")+1,

随机推荐