javascript - 在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以获得更多详细信息。