vue入门： 实现选中并显示修改功能
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入门： 实现选中并显示修改功能的更多相关文章
- 修改spinner选中以后显示的字体颜色
原来spinner选中以后显示的view 还是textview ,这样就是可以设置它的字体颜色了 sp.setOnItemSelectedListener(new OnItemSelectedLi ...
- Vue 入门之数据绑定
什么是双向绑定? Vue 框架很核心的功能就是双向的数据绑定. 双向是指:HTML 标签数据 绑定到 Vue 对象,另外反方向数据也是绑定的.通俗点说就是,Vue 对象的改变会直接影响到 HTML 的 ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- 打开phpmyadmin显示高级功能尚未完全设置部分功能未激活
问题:老师,打开phpmyadmin显示高级功能尚未完全设置部分功能未激活,应该如何解决? 这是前一阵子学生问过我的一个问题,今天我就在博客里解答你的疑问吧. 总共三步可以搞定 1.导入相关文件到数据 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能
1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
随机推荐
- 初识MySQL——人生若如初相逢
CREATE TABLE `student`(`studentNo` INT (4) NOT NULL PRIMARY KEY COMMENT '学号',`loginPwd` VARCHAR(20) ...
- Fragment中的方法findFragmentById(int id)的返回值探讨
在学习<Android编程权威指南>P124页的时候,遇到了这样的代码: 引起了我的疑问if的判断条件是(fragment==null),那执行完上一句 Fragment Fragment ...
- Linux ARP代理 与 NAT
有时候我们会在一个已有网络(10.10.10.0/24)内组建一个实验网络(192.168.1.0/24),网络结构如上图所示. 假设我们不能控制(修改)A网络内除D主机以外的系统配置,但可以完全控制 ...
- 03_Redis数据类型（List）
[List类型] Redis采用的是LinkedList. ArrayList: 数组存储.查询快,增删慢. LinkedList:链表存储.增删快,查询慢,查询两端快. Redis的list内部采用 ...
- 自动装配(AutoWire)
根据 autowire 的配置选择装配策略 byName 选择和属性名 name 一致的 bean 进行装配: byType 根据类型选择,如果对应的类型匹配到多个bean,则会报错,如下配置: &l ...
- sqlserver broker远端端点证书认证
1:采用windows验证的方法: CREATE ENDPOINT InstInitiatorEndpoint STATE = STARTED AS TCP ( LISTENER_PORT = ) F ...
- tensorflow读取jpg格式图片报错 ValueError: Only know how to handle extensions: ['png']; with Pillow installed matplotlib can handle more images
当运行mpimg.imread("img.jpg")时,spyder 出现如下错误: ValueError: Only know how to handle extensions: ...
- Struts的学习-配置
1.进入官网http://struts.apache.org/download.cgi#struts2513,这里为下载地址,(ps:struts-2.5.13-all版本). 2.将..\strut ...
- May 31st 2017 Week 22nd Wednesday
No great discovery was ever made without a bold guess. 没有大胆的猜测就没有伟大的发现. When our ancestors saw the b ...
- Fiori里花瓣的动画效果实现原理
Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成.另一种是下图的3/4个圆环不断旋转的效果. 关于前者的效果,可以看我制作的这个视频.这个视频是手动 ...