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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python处理Excel文件实例代码
2017/06/20 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
初中英语演讲稿
2014/04/29 职场文书
会计求职自荐信
2014/06/20 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书