Несколько условий в vue.js

Question

Я новичок в vue.js и пытаюсь добавить несколько условий.

РЕДАКТИРОВАТЬ: Первый пример кода работает. (Я очень устал прошлой ночью и не знаю, о чем думал).

например.

if hours > 11 && hours < 18 show some text etc..

Вот мой первый код:

https://jsfiddle.net/hyL723fb/20/

Вот мой второй код:

http://jsfiddle.net/trcyn2qh/28/

Answer 1

Я не знаю, в чем именно проблема в вашем коде, но вы можете сделать то же самое с методами и Lifecycle Hooks вместо вычисляемых свойств:

new Vue({
  el: '#app',
 data: {
        hours: new Date().getHours(),
    getHoursCondition: '' //define the variable first
  },
  methods: {
     getHours: function () {
    if (this.hours > 01 && this.hours < 11) {
        this.getHoursCondition = 'Good morning';
    } 
    else if (this.hours > 11 && this.hours < 17) {
            this.getHoursCondition = 'Good afternoon';
}
else if (this.hours > 18 && this.hours < 24) {
            this.getHoursCondition = 'Good evening';
} else {
        this.getHoursCondition = 'something';
}
  }
},
  mounted(){
     //when the instance is mounted call the method getHours()
      this.getHours()
  }
});

Answer 2

Во втором примере вы переопределяете getHoursCondition в вычисляемой функции getHoursCondition. Это вызовет проблему конфликта имен. Вы должны просто вернуть желаемое значение из функции.

Например:

if (this.hours > 01 && this.hours < 11) {
        return 'Good morning'; // <-- return the value
    } 

Вот рабочая скрипка (она говорит «добрый день», что правильно для моего времени): http://jsfiddle.net/9e53pm2q/