Question

我有一个预约应用程序，允许用户预订车辆。我列出了每天租车的费用，即每天100英镑。我如何计算租金的总成本？

在预订新（_form.html.erb）用户选择开始日期和结束日期

 <div class="field">
  <%= form.label :startDate, "Start Date:" %>
  <%= form.text_field :startDate, {class: "form-control custom", id: "start-date"}%> 
 </div>

 <div class="field">
  <%= form.label :endDate, "End Date:" %>
  <%= form.text_field :endDate, {class: "form-control custom", id: "end-date"}%> 
 </div>

目前，费用字段是默认输入字段。

我可以使用

调用车辆费用

<%= @vehicle.cost %>

我如何计算成本？它会像endDate - startDate一样获得总天数然后乘以成本吗？

Answer 1

总费用是每日价格*天数。

如果您想在控制器中计算价格：

Vue.component('my-comp', {
  template: '#styled-input-tpl',
  props: ['value']
});

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    vnode.componentInstance.$on('blur', function (e) {
      console.log('received $on(blur) - event value:', event);
    });
    vnode.componentInstance.$on('input', function (e) {
      console.log('received $on(input) - event value:', e);
    });
    
    el.addEventListener('blur', (e) => {
      console.log('received NATIVE(blur) - event value:', e.target);
    }, true);  // <======================================================= IMPORTANT
    
    el.addEventListener('input', (e) => {
        console.log('received NATIVE(input) - event value:', e.target);
    });
  }
})

new Vue({
  el: '#app'
})

如果您想在视图中更改日期：

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<template id="styled-input-tpl">
    <div>
        <input 
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            v-on:blur="$emit('blur', $event.target.value)"
        />
    </div>
</template>

<div id="app">
  Edit the input, focus out, and check the console.
  <my-comp v-my-directive :value="'edit me'"></my-comp>
</div>

计算预订的费用

1 个答案: