Я делаю погодное приложение, но не понимаю, почему мой код не меняет фоновое изображение.

Код приложения: https://codepen.io/Link0w0/pen/ZEeBaOj

Код, который я добавил для изменения фона:

<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 
    'warm' : ''">
  #app.warm {
  background-image: url('https://images.unsplash.com/photo-1581205135021-fbad89f942a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2894&q=80')
     background-size: cover;
  background-position: bottom;
}
2
user12753393 20 Май 2021 в 10:43

2 ответа

Лучший ответ

У вас есть несколько ошибок в коде codepen:

  1. + Изменить
<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 'warm' : ''">

К

<div id="app" :class="weather.main && weather.main.temp > 16 ? 'warm' : ''">
  1. У вас есть закрывающий </div> сразу после фрагмента <div id="app" .... Переместите этот закрывающий тег после закрывающего тега </main>.

Вот рабочий пример с имитацией объекта weather: https://codepen.io/sandmaan/pen/oNZBbYY

1
Sandman 20 Май 2021 в 11:21

Вы можете заменить логику: class на приведенный ниже код

<div id="app" :class="{warm: weather.main && weather.main.temp > 16}">
    <!-- rest of code -->
</div>

В части CSS вы можете заменить # app.warm на .warm

  .warm {
    background-image: url('https://images.unsplash.com/photo-1581205135021-fbad89f942a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2894&q=80')
    background-size: cover;
    background-position: bottom;
  }
0
vishwas 20 Май 2021 в 10:57