Vue вывод по условию

Question

{{ user ? '<i class="fe fe-check text-success"></i>' : 'нет'}}

Подскажите как сделать чтоб код заработал, во Vue вывожу по условию иконку, но выводится полностью код

Answer 1

Попробуйте использовать, v-if задает условие для показа элемента, v-else - в противном случае.

<i v-if="user" class="fe fe-check text-success"></i>
<span v-else>нет</span>

Answer 2

new Vue({
  el: '#app',
  template: `
    <div>
      <button type="button" @click="setUser">set user</button>
      <div v-html="status"></div>
      
      <br>
      <div>или как сказал Nefelit. Только лучше с атрибутом key.</div>
      <i v-if="user" key="user" class="fe fe-check text-success"></i>
      <span v-else key="not_user">нет</span>
    </div>
  `,
  data() {
    return {
      user: undefined,
    };
  },
  computed: {
    status() {
      return this.user ? `<i class="fe fe-check text-success"></i>` : "нет";
    },
  },
  methods: {
    setUser() {
      this.user = !this.user;
    },
  },
})

.fe-check {
  background: url('https://api.iconify.design/fe-check.svg') no-repeat center center / contain;
  height: 50px;
  width: 50px;
  display: inline-block;
}

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

БЛОГ НА HUSL

Vue вывод по условию

Ответы (2 шт):