Vue.js HTML呈现中的V-for循环

我使用v-for循环来呈现HTML。我想在这个for循环之外创建一个变量，并想在呈现HTML时在th for循环内使用它

使用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>";
}

如何使用vueJs实现同样的效果。 我试过了

{{message.text}}

这很简单：

newvue({
el:“应用程序”，
数据：{
信息：[“abc”、“abc”、“xyz”、“xyz”、“abc”、“xyz”]
}
})

---
{{msg}}
---

您必须在“p”标记中加入与在php代码中应用的相同的条件。

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

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