简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Un débutant de Vue demande de l'aide. v-for et v-if rendent plusieurs éléments au même niveau Comment changer l'affichage/masquage de l'un des éléments individuellement ?
淡淡烟草味
淡淡烟草味 2017-06-12 09:27:36
0
2
1070

Je m'entraîne en créant une liste de tâches faite maison qui peut être ajoutée, supprimée et modifiée, en imitant www.todolist.cn, et je suis resté bloqué lors de la réédition du contenu de la tâche. Il n'y a pas de solution officielle, donc je suis. demander de l'aide ici. ce qui suit.

Cliquez sur le texte pour le changer en modification d'entrée, mais l'effet est comme ceci
Parce que mon v-if est lié à la même variable, il sera certainement modifié globalement, mais ma compréhension de vue est trop superficielle pour pensez à un moyen efficace.
Code : `<!DOCTYPE html>
<html lang="fr">
<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>

</tête>
<corps>

<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>
<script>

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>`
Existe-t-il un moyen de masquer uniquement l'étendue actuelle et d'afficher l'entrée après avoir déclenché l'événement de refonte ? Demandez conseil aux experts !

淡淡烟草味
淡淡烟草味

répondre à tous(2)
扔个三星炸死你
扔个三星炸死你2017-06-12 09:29:36 2 plancher 
this.isRevamp = !this.isRevamp;

Cette méthode affichera ou masquera toutes les tâches ensemble,

Pour cibler uniquement une certaine tâche, vous pouvez ajouter un isRevamp pour chaque tâche, et cela devient alors : 

todo.isRevamp = !todo.isRevamp;

Mais cela nécessite que chaque tâche dans vos données contienne isRevamp au début. Si vous souhaitez l'ajouter dynamiquement, cela sera plus gênant. Veuillez consulter la section « Principe réactif » dans le document : https://cn.vuejs. org/v2/guide...

Mais il existe un moyen simple de résoudre ce problème : ajoutez une variable d'index aux données,
à peu près comme ceci : 

<li v-for="(v,i) in list" v-show="i==index" @click="show(i)">{{v}}</li>

show:function(i){
this.index=i;
}
Comme +0
Ajouter une réponse
小葫芦
小葫芦2017-06-12 09:29:36 1 plancher

C'est très simple, il suffit de lier une variable d'état à chaque élément.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！