Saya berlatih dengan membuat todolist buatan sendiri yang boleh ditambah, dipadam, dan diubah suai, meniru www.todolist.cn, dan tersekat apabila mengedit semula kandungan todo. Tiada penyelesaian rasmi, jadi saya meminta pertolongan di sini. yang berikut. 
Klik pada teks untuk menukarnya kepada pengubahsuaian input, tetapi kesannya seperti ini
Oleh kerana v-if saya terikat kepada pembolehubah yang sama, ia pasti akan diubah secara global, tetapi pemahaman saya tentang vue terlalu cetek untuk fikirkan cara yang berkesan.
Kod: `<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<title>NBtodoList</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<style>
body{
background: #CDCDCD;
}
header{
height: 50px;
line-height: 50px;
background: #323232;
}
.headerForm label{
color: #DDDDDD;
font-size: 20px;
cursor: pointer;;
}
.headerForm input{
margin-top: 8px;
}
.h2{
font-weight: bold;
margin: 20px 0;
}
section{
}
li,ul,ol{
list-style: none;
}
.oLi{
height: 40px;
background: #fff;
border-radius: 5px;
line-height: 40px;
border-left: 5px solid #629A9C;
margin-bottom: 10px;
}
.oLi .check{
width: 22px;
height: 22px;
margin: 9px;
}
.oLi p{
height: 40px;
}
.oLi *{
padding: 0;
}
.oLi i{
text-align: center;
line-height: 40px;
font-size: 18px;
}
.oLi span{
cursor: pointer;
}
.oLi .txt{
line-height: 50px;
display: inline-block;
padding-left: 5px;
}
ul{
padding-left: 0;
}
</style>
</kepala>
<badan>
<p id="app">
<header class="container-fluid">
<p class="container">
<p class="headerForm form-group center-block clearfix">
<label for="todocontent" class="pull-left col-xs-3">ToDoList</label>
<p class="col-xs-9 pull-right">
<input autofocus type="text" id="todocontent" class="form-control" v-model='todoText' v-on:keyup.enter='addTodo' placeholder="添加ToDo">
</p>
</p>
</p>
</header>
<section class="container">
<p class="center-block" style="padding: 0 15px">
<my-h2 v-bind:num='noNum' status='正在进行'></my-h2>
<ul>
<my-li v-for='(todo,index) in todoList' v-bind:to='todo' v-on:deltodo='deltodos(index)' v-on:todook='dotoDown(index)' v-on:childrevamp="revamp" v-bind:childisrevamp="isRevamp"></my-li>
</ul>
<my-h2 v-bind:num='okNum' status='已经完成'></my-h2>
<ul>
<my-li style="opacity: .5" v-for='(oktodo,index) in oktodoList' v-bind:childchecked="checked" v-bind:okto='oktodo' v-on:deltodo='deloktodos(index)' v-on:todook='dotoUp(index)' childisrevamp="ture"></my-li>
</ul>
</p>
</section>
</p>
</body>
<skrip>
Vue.component('my-li',{
props:['to','okto','childchecked','childisrevamp'],
template: '<li class="oLi"><input type="checkbox" v-model="childchecked" v-on:change="todook" class="check col-xs-1"/><p class="pull-left col-xs-10"><span v-on:click="childrevamp" v-if="childisrevamp">{{to}}{{okto}}</span><input v-on:blur="childrevamp" v-if="!childisrevamp" class="txt form-control"></input></p><i href="#" v-on:click="deltodo" class="pull-right col-xs-1 glyphicon glyphicon-remove"></i></li>',
methods: {
childAddTodo: function(){
this.$emit('childAddTodo')
},
deltodo: function(){
this.$emit('deltodo');
},
todook: function(){
this.$emit('todook');
},
childrevamp: function(){
this.$emit('childrevamp');
}
}
})
Vue.component('my-h2',{
props: ['num','status'],
template: '<h2 class="h2">{{status}}<span class="pull-right badge" style="margin-top: 8px;">{{num}}</span></h2>'
})
new Vue({
el: '#app',
data: {
todoText: '',
todoList: [],
okTodoText: '',
oktodoList: [],
noNum: 0,
okNum: 0,
checked: true,
isRevamp: true
},
methods: {
addTodo: function(){
this.todoText.trim() ? this.todoList.push((this.todoText).trim()) : alert('你输嘞不对~');
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.length;
this.todoText = '';
},
deltodos: function(index){
this.todoList.splice(index,1);
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.length;
},
deloktodos: function(index){
this.oktodoList.splice(index,1);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.okNum = this.oktodoList.length;
},
dotoDown: function(index){
this.oktodoList.push(this.todoList[index]);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.deltodos(index);
this.okNum = this.oktodoList.length;
},
dotoUp: function(index){
this.todoList.push(this.oktodoList[index]);
localStorage.notodo = JSON.stringify(this.todoList);
this.deloktodos(index);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.noNum = this.todoList.length;
},
revamp: function(){
this.isRevamp = !this.isRevamp;
}
},
created:function(){
this.todoList = localStorage.notodo ? JSON.parse(localStorage.notodo) : [];
this.oktodoList = localStorage.oktodo ? JSON.parse(localStorage.oktodo) : [];
this.noNum = this.todoList.length;
this.okNum = this.oktodoList.length;
}
})
</script>
</html>`
Adakah terdapat cara untuk menyembunyikan hanya rentang semasa dan memaparkan input selepas mencetuskan acara rombakan? Minta nasihat pakar!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kaedah ini akan menunjukkan atau menyembunyikan semua todos bersama-sama,
Untuk menyasarkan todo tertentu sahaja, anda boleh menambah isRevamp untuk setiap todo, dan kemudian ia menjadi:
Tetapi ini memerlukan setiap todo dalam data anda mengandungi isRevamp pada permulaan Jika anda ingin menambahkannya secara dinamik, ia akan menjadi lebih menyusahkan Sila lihat bahagian "Prinsip Responsif" dalam dokumen: https://cn.vuejs. org/v2/panduan...
Tetapi ada cara mudah untuk menanganinya: tambah pembolehubah indeks pada data,
kira-kira seperti ini:
Ia sangat mudah, cuma ikat pembolehubah keadaan pada setiap elemen.