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. Unity3D第一课之自转与公转

    1.物体公转,即围绕一个中心物体旋转 public class gongzhuan : MonoBehaviour { public GameObject Axis;//轴,用于选择围绕中心 publ ...

  2. 针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]

    其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现 第一步就是增加个播放的图片..要不然没有按钮多难看! <div class="videoDi ...

  3. VUE-地区选择器(V-Distpicker)

    V - Distpicker 地区选择器环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上.文档: https://distpicker.pigjian.com/g ...

  4. shiro 安全管理框架配置

    step1  web.xml <!-- Shiro filter start --> <filter> <filter-name>shiroFilter</f ...

  5. Mac安装Gradle eclipse安装buildship插件

    一直用的eclipse+mvn,现在需要导入别人的gradle项目,所以下载了gradle和在eclipse中安装了buildship插件. 一,mac下安装gradle 1,点击网页https:// ...

  6. 菜鸟学习Spring——SpringMVC注解版在服务器端获取Json字符串并解析

    一.概述. SpringMVC在服务端把客户端传过来的JSON字符串,并把JSON字符串转成 JSON对象并取得其中的属性值,这个在项目中经常用到. 二.代码演示. 需要添加的jar包. 2.1 we ...

  7. struts-config.xml 中 action 与 forward 的重要属性

    1.forward 的 redirect 可以为true.false(默认).yes.no true和yes一样,false和no一样: redirect="false",容器内跳 ...

  8. 如何开放 Azure 虚拟机 Ping 功能

    前言 文章<使用 PsPing & PaPing 进行 TCP 端口连通性测试>中提到,ICMP 协议的数据包无法通过 Azure 的防火墙和负载均衡器,所以不能直接使用 Ping ...

  9. Spring MVC controller控制器映射无法访问问题！！！

    月 26, 2019 2:47:58 上午 org.apache.coyote.AbstractProtocol start信息: Starting ProtocolHandler ["aj ...

  10. （LaTex)CTex的初次使用心得及入门教程

    摘要 最近要发论文了,被知乎里人推荐使用论文编译软件(CTex.LaTex和Overleaf之类),瞬间感觉自己用Word简直Out了(书读少). 学校里也听说过LaTex,不过因为当时没怎么写过论文 ...