Визуализировать элемент в двойных фигурных скобках {{}} в Vue. js

Question

Я пытаюсь сделать следующее:

{{ limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre' }}

Однако Vue не принимает, чтобы я добавил еще один элемент <i> внутри {{}}. Как мне обойти это? \<i не работает ...

Answer 1

Вы можете использовать v-if и v-else следующим образом:

new Vue({
     el: '#app',
     data(){
          return{
               limit_by:4
          }
     }
});

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div id="app">
     <p v-if="limit_by===4">
          <i class="fas fa-plus"></i>Visa fler...
     </p>
     <p v-else>
          Visa färre
     </p>
</div>

Вы можете проверить docs для получения дополнительной информации.

Answer 2

Попробуйте использовать условный рендеринг с директивами v-if и v-else:

<template v-if="limit_by===4">
   <i class="fas fa-plus"></i>Visa fler...
</template>
<template v-else>
   Visa färre
</template>

Answer 3

Важно отметить, что использование двойных усов интерпретирует данные как простой текст, а не html. Я перефразирую здесь, но обратите внимание на директиву v-html, которая упакована с Vue на этой странице .

Использование директивы v-html означает, что вы все еще можете поддерживать использование ваш тернарный оператор следующим образом:

<div v-html="limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre'"></div>