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. mvc 页面简单get获取后台数据

    后台方法 public ActionResult Linq() { var lt = UserSys.FindAll(); Hashtable ht = new Hashtable(); ht.Add ...

  2. 归并排序——Java实现

    一.排序思想 将两个或两个以上的一排序文件合并成一个有序文件的过程叫归并,而归并排序就是建立在归并操作上的一种有效的排序算法,该算法是采用分治法的一个非常典型的应用.将以有序的了序列合并,得到完全有序 ...

  3. Xshell连接不上虚拟机的问题和解决办法

    第一次用xshell,一直连不上linux,搞了好久,也查了很多办法,但是最后也终于解决了,在这里我分享一下自己的解决办法,再列举网上的办法,希望可以帮助其他人. 1,你的linux ip地址没有配置 ...

  4. windows RT开发笔记：WinRT DLL及其调用研究

    一． 几个概念: WinRT : Windows Runtime, windows运行时.创建Windows运行时(WinRT)是为了在Windows上给用户提供一种流畅且安全的应用体验.WinRT会 ...

  5. 成功解决：FutureWarning: Conversion of the second argument of issubdtype from `float` to `np.floating` is

    问题原因: 包内出错,是h5py包 解决思路: 执行如下操作: pip -- install h5py==2.8.0rc1 注意:如果执行pip install h5py==2.8.0rc1 成功话, ...

  6. oracle备份恢复

    1.oracle文件备份恢复 /etc/oraInst.loc /etc/oratab /home/oracle 家目录 /oracle 安装目录 /usr/local/bin/dbhome /usr ...

  7. dos基础+环境搭建基础理论

    dos基础 市面上两大操作系统 windows.*nix(unix.linux.mac.bsd(安全性比较高)) 后三种都属于unix的衍生版本 linux是为了兼容unix开发的,最后开放了源代码 ...

  8. 使用while循环+try-except定位元素

    selenium学习过程中,发现自己遇到的最大的困难不是那些元素的操作,而是元素的定位,有时候明明利用firebug将xpath路径确认好了,但是在定位元素的时候还是会报错,后来在度娘上找到了一个方法 ...

  9. python入门14 字典dict

    字典dict是无序的key:value格式的数据序列 #coding:utf-8 #/usr/bin/python """ 2018-11-11 dinghanhua 字 ...

  10. [原]Android打包之Ant打包

    Android自动打包流程详细图: 使用Ant打包会简单很多,只要使用以下两个命令就可以搞定: android update project -p . --target android-18 ant ...