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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
eval的两组性能测试数据
Aug 17 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
PHP 源代码压缩小工具
2009/12/22 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Angular2库初探
2017/03/01 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
Python代码实现KNN算法
2017/12/20 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python怎么判断素数
2020/07/01 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python ellipsis 的用法详解
2020/11/20 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
出生公证书样本
2014/04/04 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
毕业生自荐信范文
2015/03/05 职场文书
《刷子李》教学反思
2016/02/20 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书