vue入门： 实现选中并显示修改功能

1.实现功能

2.工具

vue

3.代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Try</title>
</head>

<body>
  <div id="app">
    <button @click="addNote()">
      click me!
    </button>
    <div v-for="note in notes" @click="show(note.id)">
      {{note.id}}:{{note.content}}
    </div>
    <div>

      id: {{note.id}}
      <br> content:
      <input type="text" v-model="note.content">
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script>
    function findArr(value, arr) {
      let res = arr.find((x) => x.id === value)
      return res
    }
    var app = new Vue({
      el: '#app',
      data() {
        return {
          notes: [],
          note: {
            id: null,
            content: 'this is a content'
          }
        }
      },
      methods: {
        addNote() {
          let temp = { ...this.note
          }
          temp.id = this.notes.length + 1
          this.notes.push(temp)
        },
        show(id) {
          this.note = findArr(id, this.notes);
        }
      }

    })
  </script>

</body>

</html>
posted @ 2018-08-21 12:49  Vine.Y  阅读(479)  评论(0)  编辑  收藏  举报
TOP