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>

vue入门： 实现选中并显示修改功能的更多相关文章

  1. 修改spinner选中以后显示的字体颜色

    原来spinner选中以后显示的view  还是textview  ,这样就是可以设置它的字体颜色了 sp.setOnItemSelectedListener(new OnItemSelectedLi ...

  2. Vue 入门之数据绑定

    什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...

  3. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  4. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  5. 打开phpmyadmin显示高级功能尚未完全设置部分功能未激活

    问题:老师,打开phpmyadmin显示高级功能尚未完全设置部分功能未激活,应该如何解决? 这是前一阵子学生问过我的一个问题,今天我就在博客里解答你的疑问吧. 总共三步可以搞定 1.导入相关文件到数据 ...

  6. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  7. JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...

  8. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. Vue入门---常用指令详解

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

随机推荐

  1. bootstrap dialog对话框，完成操作提示框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  2. mac解决系统设置安全与隐私没有允许所有来源

    解决系统设置安全与隐私没有允许所有来源:sudo spctl --master-disable

  3. SVN服务器在Ubuntu16.04下搭建多版本库详细教程

    1  介绍  Subversion是一个自由,开源的版本控制系统,这个版本库就像一个普通的文件服务器,不同的是,它可以记录每一次文件和目录的修改情况.这样就可 以很方面恢复到以前的版本,并可以查看数据 ...

  4. Linux ARP代理 与 NAT

    有时候我们会在一个已有网络(10.10.10.0/24)内组建一个实验网络(192.168.1.0/24),网络结构如上图所示. 假设我们不能控制(修改)A网络内除D主机以外的系统配置,但可以完全控制 ...

  5. 给HTML拍个照（如何将html元素转成图片）

    本文主要介绍一款好用的库,如何将HTML生成图片. 1.简述 最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是 ...

  6. mybatis中sql语句查询操作

    动态sql where if where可以自动处理第一个and. <!-- 根据id查询用户信息 --> <!-- public User findUserById(int id) ...

  7. Hadoop ->> HDFS(Hadoop Distributed File System)

    HDFS全称是Hadoop Distributed File System.作为分布式文件系统,具有高容错性的特点.它放宽了POSIX对于操作系统接口的要求,可以直接以流(Stream)的形式访问文件 ...

  8. day009-IO流

    什么叫流?就是数据的流动.以内存为基准,分为输入input和输出output.输入也叫做读取数据,输出也叫写出数据. 分类 按数据的流向分: 输入流.输出流 按数据类型分:    字节流.字符流 1. ...

  9. March 1 2017 Week 9 Wednesday

    If you are serious giving up something, giving up is not serious at all. 如果你慎重地决定要放弃,那么放弃本身就没什么大不了的. ...

  10. MAVEN本地下载、安装

    1. 安装jdk (此处版本选择1.7以上) 此处不做安装说明!!! 2.Eclipse.配置及安装 此处不做安装说明!!! 3.maven安装包(此处选择apache-maven-3.5.2-bin ...