javascript - 如何在 Vue.js 中向 HTML 代码添加条件？

Question

我有以下模板代码:

<template v-for="(index, message) in messages">
  {literal}
  <div class="message_block {{message.message_type}}" v-if="message.message_type">
    <div class="message">
      {{message.message}}
    </div>
  </div>
  {/literal}
</template>

我想做的是显示一行 - <div class="message_block"... ，如果message.message_type不等于null ，或者不是undefined .

这是我得到的数据:

var demo = new Vue({
  el: '#testblock',
  data: {
    messages: [
      { message: 'Foo', message_type: "left" },
      { message: 'Bar', message_type: null }
    ]
  }
})

我正在尝试添加包装器 <div class="message_block"> ，如果 message_type不等于null .

Answer 1

根据您上面的评论:

@LinusBorg No, I want the "Bar" to show regardless of the value of message_type, it's just if message_type is null, I don't want a wrapper around it.

除了复制内部 div 之外没有其他方法。

<template v-for="(index, message) in messages">
  {literal}
  <div class="message_block {{message.message_type}}" v-if="message.message_type">
    <div class="message">
      {{message.message}}
    </div>
  </div>

  <div v-if="!message.message_type" class="message">
    {{message.message}}
  </div>
  {/literal}
</template>

如果你不想重复它，你可以将它定义为一个小组件来重复使用它，或者使用 partial .