正文
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>
