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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
js实现无限瀑布流实例方法
Sep 16 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下实现折线图效果的代码
2007/04/28 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
ES6 class的应用实例分析
2019/06/27 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
本科应届生自荐信
2014/06/29 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript