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 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
Dedecms常用函数解析
2008/02/01 PHP
php正则表达式(regar expression)
2011/09/10 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php 获取本地IP代码
2013/06/23 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python datetime处理时间小结
2020/04/16 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
.NET面试问题集
2015/12/08 面试题
中学生班主任评语
2014/01/30 职场文书
移风易俗倡议书
2014/04/15 职场文书
接收函格式
2015/01/30 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang