v-bind:style вынести в computed VUE JS

137
08 января 2020, 17:30

День добрый. С помощью :style забиндила стили внутри Html-кода, теперь понимаю, что логичнее было бы такой кусок кода поместить в computed внутри скрипта. Но не понимаю теперь, как грамотно это сделать.
Помогите пожалуйста. Как свойства из :style грамотно вынести в computed

Answer 1

new Vue({ 
  el: '#app', 
  data: { 
    rangeRed: 50, 
    rangeGreen: 40, 
    rangeBlue: 110, 
    rangeAlpha: .5, 
    rangeWidth: 100, 
    rangeHeight: 200, 
    rangeRadius: 10 
  }, 
  computed: { 
    blockStyles() { 
      return { 
        backgroundColor: 'rgba('+ this.rangeRed + ', ' + this.rangeGreen + ', ' + this.rangeBlue +  
                ', ' + this.rangeAlpha  + ')',  
        width: this.rangeWidth + 'px',  
        height: this.rangeHeight + 'px', 
        borderRadius: this.rangeRadius + '%' 
      } 
    } 
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <div :style="blockStyles"></div> 
</div>

READ ALSO
Как переписать код с jquery на vanilla javascript
javascript

Как переписать код с jquery на vanilla javascript

есть такой код

 133
Тупит сборщик мусора
javascript

Тупит сборщик мусора

Чтобы было меньше вопросов, опишу краткую суть - Занимаюсь самописным модулем, он делает следующее: Получает небольшие данные буфером -> индексирует...

 119
как можно переписать этот метод на async/await
javascript

как можно переписать этот метод на async/await

как можно переписать эту функцию без использования new Promise, используя только async/awaitМожет есть какие то примеры?

 132
Создание сервера в nodejs
javascript

Создание сервера в nodejs

Изучаю nodejs, подскажите чем отличаются эти команды:

 137