欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue數(shù)字類型過濾器的示例代碼

 更新時間:2017年09月07日 09:51:34   作者:喝不醉再來  
本篇文章主要介紹了vue數(shù)字類型過濾器的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

需求 只能輸入數(shù)字

輸入字母和特殊字符自動過濾掉

輸入完成失焦自動加.00 如果輸入了小數(shù)自動四舍五入為22.22類似這樣格式

效果圖


可以使用在普通js和angular里面,vue 直接調(diào)用

先上調(diào)用的函數(shù)

/**
 * User: sheyude
 * Date: 2017/9/4 0004
 * Time: 上午 10:51
 *
 */
let number = {
  twoWay: true,
    bind:function (el) {
  el.addEventListener('blur',function () {
    // let value = formatNumber(el.value,2,0)
    let value

    (function(){
      value = formatNumber(el.value,2,0)
      return value
    })()
    el.value =value
  })
},
  update:function (el,binding,vnode) {
    if(el.value !== ''){
      el.value = el.value.replace(/[^0-9.]+/g, '');
    }
  }
}

/**
 * 將數(shù)值四舍五入后格式化.
 * @param num 數(shù)值(Number或者String)
 * @param cent 要保留的小數(shù)位(Number)
 * @param isThousand 是否需要千分位 0:不需要,1:需要(數(shù)值類型);
 * @return 格式的字符串,如'1,234,567.45'
 * @type String
 */
function formatNumber(num,cent,isThousand) {
  num = num.toString().replace(/\$|\,/g,'');

  // 檢查傳入數(shù)值為數(shù)值類型
  if(isNaN(num))
    num = "0";

  // 獲取符號(正/負(fù)數(shù))
  let sign = (num == (num = Math.abs(num)));

  num = Math.floor(num*Math.pow(10,cent)+0.50000000001); // 把指定的小數(shù)位先轉(zhuǎn)換成整數(shù).多余的小數(shù)位四舍五入
  let cents = num%Math.pow(10,cent);       // 求出小數(shù)位數(shù)值
  num = Math.floor(num/Math.pow(10,cent)).toString();  // 求出整數(shù)位數(shù)值
  cents = cents.toString();        // 把小數(shù)位轉(zhuǎn)換成字符串,以便求小數(shù)位長度

  // 補(bǔ)足小數(shù)位到指定的位數(shù)
  while(cents.length<cent)
    cents = "0" + cents;

  if(isThousand) {
    // 對整數(shù)部分進(jìn)行千分位格式化.
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3));
  }

  if (cent > 0)
    return (((sign)?'':'-') + num + '.' + cents);
  else
    return (((sign)?'':'-') + num);
}
export {
  number
}

如果你是vue用戶用戶請繼續(xù)看 vue全局注冊指令

/**
 * User: sheyude
 * Date: 2017/9/4 0004
 * Time: 上午 11:00
 *
 */
import {number} from './numberDirective'


import Vue from 'vue'

Vue.directive('numbers',number)

vue 使用方式 input 里面加入v-numbers就行

<template>
  <input type="text" class="form-control" placeholder="" v-numbers v-model="valueData">
</template>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中ant-design-vue組件的安裝與使用

    vue中ant-design-vue組件的安裝與使用

    Ant Design Vue是使用Vue實(shí)現(xiàn)的遵循Ant Design設(shè)計規(guī)范的高質(zhì)量UI組件庫,用于開發(fā)和服務(wù)于企業(yè)級中后臺產(chǎn)品,下面這篇文章主要給大家介紹了關(guān)于vue中ant-design-vue組件安裝與使用的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • elementUI實(shí)現(xiàn)下拉選項(xiàng)加多選框的示例代碼

    elementUI實(shí)現(xiàn)下拉選項(xiàng)加多選框的示例代碼

    因產(chǎn)品需求和UI樣式調(diào)整,本文主要實(shí)現(xiàn)elementUI下拉選項(xiàng)加多選框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程

    vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程

    這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式(Vue2及Vue3區(qū)別)

    稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式(Vue2及Vue3區(qū)別)

    這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式(Vue2 及 Vue3),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 在vue項(xiàng)目如何使用base64加密

    在vue項(xiàng)目如何使用base64加密

    這篇文章主要介紹了在vue項(xiàng)目如何使用base64加密,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue.js實(shí)現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例

    Vue.js實(shí)現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例

    這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Vue3使用 createApp 自定義通用Dialog的方法

    Vue3使用 createApp 自定義通用Dialog的方法

    這篇文章主要介紹了Vue3使用 createApp 自定義通用Dialog的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • Xx-vue自定義指令實(shí)現(xiàn)點(diǎn)擊水波紋漣漪效果

    Xx-vue自定義指令實(shí)現(xiàn)點(diǎn)擊水波紋漣漪效果

    這篇文章主要為大家介紹了Xx-vue自定義指令實(shí)現(xiàn)點(diǎn)擊水波紋漣漪效果,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • vue登錄路由驗(yàn)證的實(shí)現(xiàn)

    vue登錄路由驗(yàn)證的實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗(yàn)證的實(shí)現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • vue?layout模板頁的使用實(shí)例詳解

    vue?layout模板頁的使用實(shí)例詳解

    Vue 項(xiàng)目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的,而且在很多項(xiàng)目中都被廣泛采用,包括像 ruoyi 這樣的框架,這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下
    2023-08-08

最新評論