Vue - получение значения атрибута данных в css - PullRequest
0 голосов
/ 09 марта 2019

Есть ли возможность получить значение атрибута данных в Vue css?

<template>
   <p data-background="purple"> TEST </p>
</template>

<style lang="scss">
p {
  background: attr(data-background); //error
  &:after {
     background: attr(data-background); //error
  }
}
</style>

1 Ответ

1 голос
/ 09 марта 2019

Вы можете использовать переменные CSS для этого случая.

new Vue({
  el: '#app',
  data: {
    elStyle: {
      '--background': 'lightblue',
    }
  }
});
p:after {
  content: 'A pseudo element';
  background: var(--background, red); // Red is the fallback value
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p :style="elStyle"></p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...