VUE的v-for指令如何交替添加DOM节点？

Question

要实现一个电影点评框，先选中电影名，然后输入评论，点击提交显示结果。问题：用vue的v-for指令时，电影名只能挨着电影名，不能在电影名下面接着评论结果，效果如图代码如下：HTML部分：Vue部分：

Answer 1

方法一

<div>

  <template v-for='(title, i) in titles'>

    <h4>

       {{title.text}} 

    </h4>

    <p>

        {{items[i].text}}

    </p>

  </template>

</div>

方法二

设一个 computed 值，比如 titleItem

computed: {

    titleItem () {

        return this.titles.map((x, i) => ({title: x, item: this.items[i]}))

    }

}

然后就可以对 titleItem 进行 v-for