Use HTML entities in my <script> block in Vue.js-CodePudding

I want to use the HTML-Symbols &#9650 and &#9660 that stand for "arrow up" and "arrow down" in the <script> section of my Vue.js component. I know that something simple as the following doesn't work. But I tried different functions that I found on the internet and nothing worked.

this.$refs["span-1"].textContent = "&#9650";

CodePudding user response：

There are two ways to achieve this :

Use v-html directive

new Vue({
  el: '#app',
  data: {
    content: "&#9650"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="content"></p>
</div>

Use innerHTML instead of textContent

new Vue({
  el: '#app',
  mounted() {
    this.$refs.myTag.innerHTML = "&#9650";
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p ref="myTag"></p>
</div>