<script> let app=new Vue({ el:'#app', data:{ id:0, name:'', books:[ {'id':1,'name':'Vue.js入门','time':new Date()} ], isEditable:true }, mounted(){ this.id=this.books.length+1 console.log(this.id) }, methods:{ onchange(){ if(this.name!=''){ this.isEditable=false } else{ this.isEditable=true } }, add(){ for(let i=0;i<this.books.length;i++){ if(this.books[i].name===this.name){ console.log("该书已经存在") return } } this.books.push({'id':this.id,'name':this.name,'time':new Date()}) this.id++ this.name='' console.log(this.books) }, del(id){ let index=this.books.findIndex((item)=>{ if(item.id==id){ return true } }) this.books.splice(index,1) } } })在这串代码中生成一个修改名字的函数功能
时间: 2024-02-10 16:15:16 浏览: 79
要实现修改书籍名称的功能,可以添加一个 `edit` 方法,接收一个书籍对象作为参数,让用户可以在界面上修改书籍名称。
代码示例:
```
<script>
let app = new Vue({
el: '#app',
data: {
id: 0,
name: '',
books: [
{'id': 1, 'name': 'Vue.js入门', 'time': new Date()}
],
isEditable: true
},
mounted() {
this.id = this.books.length + 1
console.log(this.id)
},
methods: {
onchange() {
if (this.name != '') {
this.isEditable = false
} else {
this.isEditable = true
}
},
add() {
for (let i = 0; i < this.books.length; i++) {
if (this.books[i].name === this.name) {
console.log("该书已经存在")
return
}
}
this.books.push({'id': this.id, 'name': this.name, 'time': new Date()})
this.id++
this.name = ''
console.log(this.books)
},
del(id) {
let index = this.books.findIndex((item) => {
if (item.id == id) {
return true
}
})
this.books.splice(index, 1)
},
edit(book) {
book.isEditable = true
},
save(book) {
book.isEditable = false
}
}
})
</script>
```
此处我添加了一个 `isEditable` 属性,用于判断当前是否可以编辑,如果可以编辑则将 `isEditable` 设为 `true`,否则为 `false`。在模板中,当 `isEditable` 为 `true` 时,书籍名称展示为可编辑的文本框,用户可以编辑名称;当 `isEditable` 为 `false` 时,书籍名称展示为文本,用户不能编辑名称。
在模板中,点击书籍名称后会调用 `edit` 方法,将当前书籍对象的 `isEditable` 属性设为 `true`,展示可编辑的文本框;当用户编辑完成后,点击保存按钮会调用 `save` 方法,将当前书籍对象的 `isEditable` 属性设为 `false`,展示为文本。这样就完成了书籍名称的修改功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)