Render an element within double curly brackets {{ }} in Vue.js

You can use v-if and v-else as follows:

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>

You can check the docs for more details.

Try to use conditional rendering with v-if and v-else directives :

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

It is important to note that the use of double mustaches interprets the data as plain text, not html. I'm paraphrasing here but check out the v-html directive that is packaged with Vue on this page.

Using the v-html directive means you could still maintain the use of your ternary statement as follows:

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