Question

我正在使用v-for循环呈现HTML。我想在此for循环外创建一个变量，并希望在渲染HTML时在th内使用。

使用PHP，我可以实现以下情况。

$messages = ["abc","abc","xyz","xyz","abc","xyz"];
$new = '';
foreach($messages as $val) {
if(($new == '' || $new == 'xyz') && $val == 'abc') {
    echo "--- ";
}
echo $val;
if(($new == '' || $new == 'abc') && $val == 'xyz') {
    echo " ---";
}
$new = $val;
echo "<br>";
}

输出

--- abc
abc
xyz ---
xyz
--- abc
xyz ---

如何通过vueJ实现相同的目标。我尝试过，

<div v-for='(message, index2) in messages' :key='index2'>
    <p>{{ message.text}}</p> </div>

Answer 1

很简单：

new Vue({
  el: "#app",
  data: {
    messages: ["abc","abc","xyz","xyz","abc","xyz"]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(msg,i) in messages">
    <template v-if="(messages[i-1] == undefined || messages[i-1] == 'xyz') && msg == 'abc'">
      ---
    </template>
    {{ msg }}
    <template v-if="(messages[i-1] == undefined || messages[i-1] == 'abc') && msg == 'xyz'">
      ---
    </template>
    </div>
</div>

您还可以创建一个computed属性并生成所需的确切数据，然后将其循环到html中。

渲染HTML中的V-for循环

1 个答案: