admin 管理员组

文章数量: 1086019

I am trying to do the following:

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

However Vue does not accept that i add another element <i> inside the {{ }}. How do I get around this? \<i does not work...

I am trying to do the following:

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

However Vue does not accept that i add another element <i> inside the {{ }}. How do I get around this? \<i does not work...

  • javascript
  • vue.js
  • vuejs2
  • vue-ponent
Share Improve this question edited Aug 5, 2020 at 21:52 Boussadjra Brahim 1 asked Aug 5, 2020 at 21:38 Line in LinusLine in Linus 4201 gold badge12 silver badges27 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

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

new Vue({
     el: '#app',
     data(){
          return{
               limit_by:4
          }
     }
});
<script src="https://unpkg./vue/dist/vue.min.js"></script>
<script src="https://kit.fontawesome./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>

本文标签： javascriptRender an element within double curly brackets in VuejsStack Overflow

版权声明：本文标题：javascript - Render an element within double curly brackets {{ }} in Vue.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744093625a2532494.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。