html的动态渲染无法在vue js中使用

Question

new Vue({
    el: '#application',

    data: {
        currencies: [
         {
            'name': 'Dollar',
            'sign': '$'
         }, {
            'name': 'Euro',
            'sign': '€'
         }, {
            'name': 'Pound',
            'sign': '£'
         }, {
            'name': 'Cent',
            'sign': '¢'
         }
      ]
    }
});

<select class="custom-select" v-model="quotationForm.currency">
    <option v-for="currency in currencies" v-bind:value="currency.sign">
       <span v-html="currency.sign"></span>
       {{ currency.name }}
    </option>
</select>

无法在选择框上呈现货币符号。

但是当我尝试进行统计时，如下所示，效果很好...

<select class="custom-select" v-model="quotationForm.currency">
    <option v-for="currency in currencies" v-bind:value="currency.sign">
        &euro;
        {{ currency.name }}
    </option>
</select>

为什么v-html在选择框中不起作用？有什么建议

谢谢。

Answer 1

我自己测试了它，它正在工作：Link

<template>
  <select class="custom-select" v-model="quotationForm.currency">
   <option :key="index" v-for="(currency, index) in currencies" v-bind:value="currency.sign">
     <span v-html="currency.sign"></span>
       {{ currency.name }}
   </option>
  </select>
</template>
<script>
export default {
    data() {
     return {
       quotationForm: {
         currency: null
       },
       currencies: [
        {
          'name': 'Dollar',
          'sign': '&#36;'
        }, {
          'name': 'Euro',
          'sign': '&euro;'
        }, {
          'name': 'Pound',
          'sign': '&pound;'
        }, {
          'name': 'Cent',
          'sign': '&cent;'
        }
      ]
    }
 }
}
</script>