day1-数组更新操作实例

reaaal

于 2020-07-15 18:15:30 发布

阅读量91

点赞数

分类专栏： vue视频跟学

本文链接：https://blog.csdn.net/reaaal/article/details/107333897

版权

vue视频跟学专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <fieldset>
      <legend>数组数据更新操作</legend>
      <button @click="addMessage">添加</button><br />
      <label>名字：<input type="text" placeholder="请输入名字" v-model="name" /></label><br />
      <label>年龄：<input type="text" placeholder="请输入年龄" v-model="age" /></label><br />
      <label>描述：<input type="text" placeholder="请输入描述" v-model="desc" /></label>


      <div>
        <ul>
          <li v-for="(item,index) in persons" :key="item.index">
            <span>id:{{index+1}}---名字:{{item.name}}---年龄:{{item.age}}---描述:{{item.desc}}</span>
            <button @click="delet(index)">删除</button>
            <button @click="renew(index,{name:name,age:age,desc:desc})">更新</button>
          </li>
        </ul>
      </div>
    </fieldset>

  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        persons: [
          { id: 1, name: '小花', age: 20, desc: '你是个好人' },
          { id: 2, name: '鸣人', age: 25, desc: '火影忍者' },
          { id: 3, name: '田柾国', age: 23, desc: '黄金忙内' }
        ],
        name: '',
        age: '',
        desc: ''
      },
      methods: {
        addMessage() {
          //先有一个对象
          const obj = {
            name: this.name,
            age: this.age,
            desc: this.desc
          }
          this.persons.push(obj)
          this.name = ""
          this.age = ""
          this.desc = ""
        },
        delet(index) {
          // console.log(index)
          this.persons.splice(index, 1);
        },
        renew(index, item) {
          this.persons[index].name = item.name
          this.persons[index].age = item.age
          this.persons[index].desc = item.desc
        }
      }
    })


    // 写一个邮箱的正则表达式


  </script>
</body>

</html>