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. 今天研究Unity Ioc 框架

    今天研究Unity Ioc 框架,被自己坑了两个多小时. 运行就报错,反反复复检查了很多次,配置文件,代码都没有问题,也从新写了好几遍. 最后仔细看报错消息才知道,config文件没有生成到目录……… ...

  2. 在MyEclipse中使用javadoc导出API文档详解

    本篇文档介绍如何在MyEclipse中导出javadoc(API)帮助文档,并且使用htmlhelp.exe和jd2chm.exe生成chm文档. 具体步骤如下: 打开MyEclipse,选中想要制作 ...

  3. ubuntu 下查找某个文件的方法

    1.whereis 文件名 特点:快速,但是是模糊查找,例如 找 #whereis mysql 它会把mysql,mysql.ini,mysql.*所在的目录都找出来. 2.find / -name  ...

  4. scss-传递内容块到@mixin

    样式块被传递给混入用于放置内的样式.在@content指令的位置,样式被包含进mixin. 内容块被传递到块被定义一个混合的范围进行计算. 下面的例子演示了mixin使用内容块的SCSS代码: @mi ...

  5. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  6. phpmyadmin杂记

    看着坑爹的教程..我老是报错我也很无奈啊 以下几项必改 $cfg['blowfish_secret'] = ' ';//这里引号内是空格,实际上可以是任意内容, $cfg['Servers'][$i] ...

  7. ASP.NET MVC 音乐商店 - 6. 使用 DataAnnotations 进行模型验证

    在前面的创建专辑与编辑专辑的表单中存在一个问题:我们没有进行任何验证.字段的内容可以不输入,或者在价格的字段中输入一些字符,在执行程序的时候,这些错误会导致数据库保存过程中出现错误,我们将会看到来自数 ...

  8. hibernate_ID生成策略

    increment:主键按数值顺序递增.此方式的实现机制为在当前应用实例中维持一个变量,以保存着当前的最大值,之后每次需要生成主键的时候将此值加1作为主键.这种方式可能产生的问题是:如果当前有多个实例 ...

  9. IEEP-网络实施-项目交付流程

    1.项目交付流程 1.1 定义 项目交付流程规定了对项目实施的管理和作业控制要求,保证了工程项目实施按照规定的程序进行 1.2 重要性 1.2.1提高客户满意度 1.2.2 提高工程效率,节约成本 1 ...

  10. vsftpd的安装与使用

    1.安装vsftpdyum -y install vsftpdservice vsftpd startchkconfig vsftpd on2.配置vsftpd#进入vsftpd配置文件vim /et ...