Присвойте значение Dynami c Vuejs css

Question

У меня есть следующее jsfiddle:

https://jsfiddle.net/6cu295sn/1/

new Vue({
  el: '#cct',
  lang: {           
    myText: "my text is",
  }
});

.myCSS::after{
  content: {{lang.myText}}; //this does not output anything
}

Я пытаюсь присвоить значение Vuejs dynamici c к CSS (контент), пожалуйста, кто-нибудь может посоветовать, как мне этого добиться?

Answer 1

Вы можете связать переменную css, чтобы применить ее в качестве содержимого вашего псевдокласса, как показано ниже:

new Vue({
  el: '#cct',
  data () {
    return {
      lang: "my text is"
    }
  }
})

.myCSS {
  margin: 1rem 0;
  border: 1px solid black;
}

.myCSS::after {
  content: var(--myText);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="cct">
  <input v-model="lang">
  <div class="myCSS" :style="`--myText: '${lang}'`"></div>
</div>