HTML-сущности в фильтрах Vue - PullRequest
Новая
       3

HTML-сущности в фильтрах Vue

0 голосов
/ 11 октября 2019

Я новичок в Vue и сейчас прохожу учебное пособие.

Я наткнулся на следующее: 

Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2);
});

Я думал, что поменяю знак $ на британский фунтподписать. Зная, что просто ввод знака фунта не гарантирует правильного отображения везде, я вместо этого использовал html-сущность £

Но кажется, что Vue отображает & как &, что дает конечный результат£, который отображается как £, а не как £

Как мне обойти это?

Если это поможет, вот HTML, который использует фильтр: 

<span>{{service.price | currency}}</span>

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Строка, возвращаемая фильтром, будет обрабатываться как обычный текст, поэтому, если вы включите &, < и т. Д., Они будут экранированы в сущности.

Вместо того, чтобы пытаться использоватьСущность, скрывающуюся внутри фильтра, может использовать экранирование строки JavaScript. например, 

Vue.filter('currency', function (value) {
    return '\u00a3' + value.toFixed(2);
});

Обратите внимание, что '\u00a3' создаст один символ. Вы не увидите &pound; в DOM, но это не будет проблемой. Это уклоняется от любых проблем с кодировкой символов в исходном файле, но фактически эквивалентно записи '£'.

1 голос
/ 11 октября 2019

для £ это должно работать 

Vue.filter('currency', function (value) {
    return '£' + value.toFixed(2);
});

, потому что vue.js должен обрабатывать конвертацию сам.

РЕДАКТИРОВАТЬ: Если вы хотите использовать другие специальные знаки, вы можете использовать эти 2методы, которые я нашел 

Vue.filter('currency', function(value) {
  let sign = '&pound;';
  let parser = new DOMParser();
  let dom = parser.parseFromString('<!doctype html><body>' + sign, 'text/html');
  return dom.body.textContent + value.toFixed(2)
})

new Vue({
  el: "#app",
  methods: {
    domParser() {
      let sign = '&pound;';
      let parser = new DOMParser();
      let dom = parser.parseFromString('<!doctype html><body>' + sign, 'text/html');
      return dom.body.textContent;
    },
    innerHTML() {
      let sign = '&pound;';
      var textArea = document.createElement('textarea');
      textArea.innerHTML = sign;
      return textArea.value;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ 25 | currency}}
  <br><br> {{ domParser() }}
  <br><br> {{ innerHTML() }}
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...