vue货币过滤器的实现方法

vue货币过滤器的实现方法

自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。

所以要让组件的 v-model 生效，它必须：

接受一个 value 属性

在有新的 value 时触发 input 事件

代码如下：

HTML：

{{ message }}

Total: ${{ total }}

javascript：

vue.component('currency-http://input', {

template: `\

{{ label }}\

$\

ref="input"\

v-bind:value="value"\

v-on:input="updateValue($event.target.value)"\

v-on:focus="selectAll"\

v-on:blur="formatValue"\

>\

`,

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 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

v-model实现双向传递。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。