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. A bug about RecipientEditTextView

    - Steps to reproduce the problem. Pre-condition:the threshold of the RecipientEditTextView is set to ...

  2. spynner解析中文页面，应该显示中文字符的地方都是？的解决方案

    这个是底层的QtWebKit相关库里 用的是Qt的QString spynner在将QString转为Python的通用字符串时,没有考虑到中文编码这一块的问题. Python27\Lib\site- ...

  3. 【Spring Cloud】与Spring Boot版本匹配关系

    Spring Cloud版本演进情况如下: 版本名称 版本Finchley snapshot版Edgware snapshot版Dalston SR1 当前最新稳定版本Camden SR7 稳定版本B ...

  4. js数组插入指定位置元素，删除指定位置元素，查找指定位置元素算法

    将元素x插入到顺序表L(数组)的第i个数据元素之前 function InsertSeqlist(L, x, i) { // 将元素x插入到顺序表L的第i个数据元素之前 if(L.length == ...

  5. 【IOS】IOS综合

    取精华.去糟粕!适合iOS开发者的15大网站推荐 E:/IOS视频: IOS基础/01 苹果开发零基础教程 3780m --> 63h /02 IOS开发快速入门教程 /03  IOS开发进阶教 ...

  6. 关于maven包的引入net.sf.json的问题

    最开始通过在pom.xml文件中加入 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId& ...

  7. 多线程（二）~Thread类相关的API介绍

      一.线程安全问题:     当我们使用多个线程操作统一方法内的局部变量的时候,每个局部变量在当前线程里都有自己的副本,这种情况是不会出现线程安全问题的.当我们两个线程同时操作全局变量的时候,有可能 ...

  8. SQL Server ->> CLR编程问题汇总

    1) CLR不支持C#类方法重载(Method Overload) 今天打算写个枚举目录的C# CLR存储过程,结果发现原来CLR不支持方法重载. Msg 6572, Level 16, State ...

  9. ICONIX Process

    1.像rup,iconix是用例驱动的但是比rup更轻量级.  iconix 仅仅使用四种diagram(用例图.健壮性图.时序图.类图)就可以把用例文本转成代码. 2.值得注意的健壮性分析图并不是u ...

  10. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...