vue货币过滤器的实现方法


Posted in Javascript onApril 01, 2017

自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。

所以要让组件的 v-model 生效,它必须:

  • 接受一个 value 属性
  • 在有新的 value 时触发 input 事件

代码如下:

HTML:

<div id="app">
 <p>{{ message }}</p>
 
 <currency-input label="Price" v-model="price"></currency-input>
 <currency-input label="Shipping" v-model="shipping"></currency-input>
 <currency-input label="Handling" v-model="handling"></currency-input>
 <currency-input label="Discount" v-model="discount"></currency-input>
 <p>Total: ${{ total }}</p>
</div>

JavaScript:

Vue.component('currency-input', {
 template: `\
 <div>\
  <label v-if="label">{{ label }}</label>\
   $\
   <input\
   ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
    v-on:focus="selectAll"\
    v-on:blur="formatValue"\
    >\
   </div>\
 `,
 props: {
 value: {
  type: Number,
   default: 0
  },
  label: {
  type: String,
   default: ''
  }
 },
 mounted: function () {
 this.formatValue()
 },
 methods: {
  updateValue: function (value) {
  var result = currencyValidator.parse(value, this.value)
   if (result.warning) {
   this.$refs.input.value = result.value
   }
   this.$emit('input', result.value)
  },
  formatValue: function () {
  this.$refs.input.value = currencyValidator.format(this.value)
  },
  selectAll: function (event) {
  setTimeout(function () {
   event.target.select()
   }, 0)
  }
 }
})
new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue.js!',
  price: 0,
  shipping: 0,
  handling: 0,
  discount: 0
 },
 computed: {
 total: function () {
  return ((
   this.price * 100 +
    this.shipping * 100 +
    this.handling * 100 -
    this.discount * 10
   ) / 100).toFixed(2)
  }
 }
})

效果图如下:

vue货币过滤器的实现方法

每个 Vue 实例都实现了事件接口(Events interface),即:

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

v-model实现双向传递。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
redux.js详解及基本使用
May 24 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
javascript 中的try catch应用总结
Apr 01 #Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 #Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 #Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 #Javascript
ES6新特性之函数的扩展实例详解
Apr 01 #Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 #Javascript
ES6新特性之模块Module用法详解
Apr 01 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
javascript实现评分功能
2020/06/24 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
"引用"与多态的关系
2013/02/01 面试题
三个儿子教学反思
2014/02/03 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书