Vue js如何用split切分并去掉空值和item的空格

目录
  • 用split切分并去掉空值和item的空格
  • vue空值报错

用split切分并去掉空值和item的空格

let a = 'www,mail , test,'
let m = a.split(",").map(el => el.trim()).filter(item => item.trim() != '')
console.log(m)  // ["www", "mail", "test"]

vue空值报错

如上图所示，提示percent为空，web效果图如下

如果是自测阶段不想麻烦就直接在数据库添加数据就行或者或者初始化方法赋初始值，最简便的还是在vue template里进行判断

代码如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js使用split函数按照多个字符对字符串进行分割的方法

    本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法.分享给大家供大家参考.具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以胜任呢,答案是肯定的,js的split()函数可以通过正则表达式实现多分隔符的字符串分割,调用也很简单,下面是详细范例. 下面的代码可以通过js split方法对字符串按照逗号分割 var mystring = "a,b,c,d,e"; var my

  • vue代码分割的实现(codesplit)

    在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢.做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升. 一.未分割时浏览器加载js的情况 可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大 二.做了代码分割后浏览器加载js情况 发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况 点到其他

  • vue-Split实现面板分割

    vue-Split实现面板分割

    本文实例为大家分享了vue-Split实现面板分割的具体代码,供大家参考,具体内容如下 <template>   <div class="split-pane-wrapper">     <div class="pane pane-left" :style="{width:leftOffsetPercent}">       <button @click="handleClick"&g

  • Vue js如何用split切分并去掉空值和item的空格

    Vue js如何用split切分并去掉空值和item的空格

    目录 用split切分并去掉空值和item的空格 vue空值报错 用split切分并去掉空值和item的空格 let a = 'www,mail , test,' let m = a.split(",").map(el => el.trim()).filter(item => item.trim() != '') console.log(m) // ["www", "mail", "test"] vue空值报错 如

  • vue.js路由mode配置之去掉url上默认的#方法

    比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • vue.js 实现v-model与{{}}指令方法

    上次我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类,将其与html结合在一起,并且实现v-model以及{{}}语法. tips:本节新增代码(去除注释)在一百行左右.使用的Observer和Watcher都是延用上一节的代码,没有修改. 接下来,让我们一步步来,实现一个MVVM类. 构造函数 首先,一个MVVM的构造函数如下(和vue.js的构造函数

  • Vue.js计算属性computed与watch（5）

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p

  • 使用Vue.js创建一个时间跟踪的单页应用

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • Vue.js 2.0学习教程之从基础到组件详解

    Vue.js 2.0学习教程之从基础到组件详解

    前言 最近这段时间里不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层.我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题.此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错! 对Vue 2.0的介绍 我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • vue.js实现价格格式化的方法

    vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果 这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理. HTML <div class="price"> <span v-html="goods.sale_price|format"></span> <span class="price-before">￥{{＂这里是价格数据＂}}&l

随机推荐