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如何截取字符串详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
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中将html字符串转换成html后遇到的问题小结
今天整理之前做vue项目时遇到的一些问题,发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思,听我慢慢给你到来),这个问题就是当时处理后端数据时,如何将后端返回来的字符串转换成html标签,其实根据vue官网的一个v-html方法是不是觉得很简单,当时我也是这样想的,可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了,在这里我只是用它来渲染数据): 第一,当我用v-html将后端字符串转换成了html标签后,发现我在那个字符串中解
-
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给
-
vue中如何实现变量和字符串拼接
整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享. 在data中定义变量: data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢? <button @click='showMsg'></button> //vue methods: { showMsg() { alert(`获取了${a}`); } } 注意alert()里不是单引号,而是两个 ` 号(esc下面的按键). 点击按钮出现 以上就是本文
-
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语法之拼接字符串的示例代码
本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d
-
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如何截取字符串
在后端有许多的封装方法来截取字符串或者对字符串的操作,同样前端也有相应的方法. 有一个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,
随机推荐
- Oracle存储过程、包、方法使用总结(推荐)
- ubuntu编译nodejs所需的软件并安装
- Javascript 对象的解释
- JavaScript初学者需要了解10个小技巧
- 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
- PHP实现文件上传功能实例代码
- python遍历文件夹并删除特定格式文件的示例
- C#使用List类实现动态变长数组的方法
- PHP 中执行系统外部命令
- javascript 常用关键字列表集合
- Hadoop 2.x伪分布式环境搭建详细步骤
- Oracle除去数据中的换行符以免读取出现问题
- C#递归实现回文判断算法
- Win 2003中添加LPT端口
- IE:“自动完成”功能
- [组图]互联网成就80后亿万富翁名单
- Java continue break制作简单聊天室程序
- Android中实现记事本动态添加行效果
- 在VBScript中使用类
- 让以太网线缆在恶劣的工业环境下正常工作