zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    定时器
    SysTick
    13.看门狗
    12.FSMC
    11.中断
    ##HTML行内块元素好迷啊!!
    ##HTML基础
    ##CS3动画效果
    ##管家婆项目(tools层)
    ##管家婆项目(app层)
  • 原文地址:https://www.cnblogs.com/yejingping/p/9510718.html
Copyright © 2011-2022 走看看