您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“vue怎么实现货币过滤器”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现货币过滤器”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
所以要让组件的 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怎么实现货币过滤器”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。