Question

长时间浏览器，第一次提问。

因此，对于进出董事会，我需要员工点击“out”按钮并使用Vue.js v-on：点击旁边的（）我想显示“Out at 3:55 pm”。< / p>

这是按钮 -

<button class="btn btn-smaller btn-out" v-show="user.in" v-on:click="updateOut(user)">out</button>

反过来更新Firebase DB中的usersRef timeOut状态，如下所示 -

updateOut: function (user) {usersRef.child(user['.key']).child('in').set(false)
         usersRef.child(user['.key']).child('timeOut').set(Date())
    },

使用实际日期戳更新此内容 -

{{ user.timeOut }}

我得到的问题是我无法在updateOut函数中格式化这个以简单地显示“在下午3:55”。我只能通过它来展示“Wed Mar 29 2017 10:55:02 GMT-0600（MDT）”

Srinivas - 我无法让它发挥作用。我试过了 -

methods: {
    addUser: function () {
      if (this.newUserName) {
        usersRef.push({
          name: this.newUserName,
          in: false,
          returnTime: ''

        })
        this.newUserName = ''
      },
    },
    getTime: function(user) {
      const outTime = new Date(this.user.timeOut)
      const hours = outTime.getHours()
      let minutes = outTime.getMinutes()
      if (minutes < 10) minutes = "0" + minutes // prepend 0
      return (hours + ":" + minutes)
    },
    updateReturnTime: function (user, newText) {
        usersRef.child(user['.key']).child('returnTime').set(newText)
    },
    updateIn: function (user) {
        usersRef.child(user['.key']).child('in').set(true)
        usersRef.child(user['.key']).child('timeOut').set('')
    },
    updateOut: function (user) {
         usersRef.child(user['.key']).child('in').set(false)
         usersRef.child(user['.key']).child('timeOut').set(Date.now())
    },

Answer 1

您可以创建一种将日期转换为所需格式的方法。

methods: {
 getTime() {
  const outTime = new Date(this.user.timeOut)
  const hours = outTime.getHours()
  let minutes = outTime.getMinutes()
  if (minutes < 10) minutes = "0" + minutes // prepend 0
  return (hours + ":" + minutes)
 }
}

如果您在多个地方使用此方法，则可以创建过滤器。

Vue.filter('getTime', function(date) {
    const outTime = new Date(date)
    const hours = outTime.getHours()
    let minutes = outTime.getMinutes()
    if (minutes < 10) minutes = "0" + minutes // prepend 0
    return (hours + ":" + minutes)
})

You can use it template like this.

{{ user.timeOut | getTime }}

onClick（）显示格式化时间，Reactive，Vue.js和Firebase DB

1 个答案: