vue如何截取字符串

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

有一个data数据为ipaddr

data() {

return {

ipaddr: "192.168.100.110",

};

},

1、现在需要切割成一个数组，得到四个ip值,只需要通过计算属性就可以实现

computed：{

ipaddrArray：function(){

return this.ipaddr.split('.')

}

}

最终通过ul可以展现切割的字符串

• {{item}}

展示的结果如下

2、替换字符。只需要将计算属性中的return值修改即可,如下，将 ‘.' 修改成 '-‘

computed：{

ipaddrArray：function(){

return this.ipaddr.replace(/\./g,'-')

}

}

在界面展示

{{ipaddrArray}}

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

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

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

视图效果：

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

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

视图效果：

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

时间： 2019-05-04

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

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

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

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

data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: