vue列表渲染

Vue中的列表渲染

vue中可以使用v-for的方式实现对列表或者多个数据的渲染。如：

<ul>
  <li v-for="item in items">
    {
   {
    item.message }}
  </li>
</ul>

<ul>
  <li v-for="(item,index) in items" :key="item.id">
    {
   {
    item.message }}
  </li>
</ul>

如果在渲染列表时我们需要通过一些条件过滤数据时，可以使用计算属性或者侦听器来实现数据的过滤然后在对数据进行渲染，如：
1.侦听器方式

//使用侦听器实现数组过滤功能
        const app = new Vue({
   
        el:"#mydiv",
        data: {
   
            name:"",
            filterPersons:[],
            persons:[
                {
   name:"马冬梅",age:12,gender:"女",id:10001},
                {
   name:"周冬雨",age:22,gender:"女",id:10002},
                {
   name:"周杰伦",age:32,gender: