基础系列- vue数组中传入对象(变异方法)

vue数组中传入对象

更多相关

---

数组中传入单个对象

methods方法中写法如下：

 this.data1.push({name:"lala"})

---

数组中传入多个对象

methods方法中写法如下：

 this.data1.push({name:"lala",content:"今天是个好日子"})

<template>
  <ul>
     <li v-for="(item,index) in List" :key="index">
        <p>{{ item.name }}</p>
        <p>{{ item.content}}</p>
        <button @click="add" > 添加 </button>
     </li>                 
  </ul>     
</template>

<script>
export default {
  data() {
    return {
      List: [
                    {
                        name: '111',
                        content: '我是111'
                    },
                    {
                        name: '222',
                        content: '我是222'
                    },
                    {
                        name: '333',
                        content: '我是333'
                    }
                ]
    };
  },
   methods: {
    add() {
      this.data1.push({name:"lala",content:"今天是个好日子"})
    },
  },
  mounted () {
  }
};
</script>