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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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
用PHP4访问Oracle815
2006/10/09 PHP
五个PHP程序员工具
2008/05/26 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
python实现简单登陆流程的方法
2018/04/22 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
师范生实习自我鉴定
2013/11/01 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
文明寄语大全
2014/04/11 职场文书
安全承诺书格式
2014/05/21 职场文书
上诉答辩状范文
2015/05/22 职场文书
工作收入证明范本
2015/06/12 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python