如何在 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 }
    ]
  }
})

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

Answer 1

根据您上面的评论：

@LinusBorg 不，无论 message_type 的值如何，我都希望“栏”显示，只是如果 message_type 为空，我不想要围绕它的包装器。

除了复制内部 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。