دورة vue js للمبتدئين الدرس الخامس عشر


فهاد الدرس الخامس عشر من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدو ل app ديالنا لي هي  la gestion de dépenses  العرض ديال المبلغ لي تزاد بالإضافة لتغيير لون خلفية المبلغ من الأخضر للأحمر حسب المبلغ واش إيجابي وسلبي.


1- عرض المبلغ لي تزاد

فغادي نشوفوا كيفاش نعرضوا المبلغ بهاد الطريقة لي كنشوف فالصورة :



أول حاجة غادي نزيد جوج ديال les propriété فل fonction data غادي نزيد montant لي هي المبلغ و positif لي غادي نعطيها true.

فالتغيير لي زدنا ل fonction data ف App.vue هو :

                                //App.vue

data(){
            return{
                bus : new Vue(),
                data : {libelle:'',price:''},
                montant : 0,
                name : 'Gestion de dépenses',
                positif : true
            }
 },
                            

2- تغيير لون خلفية المبلغ

فباش نغير لون خلفية المبلغ كنزيد فالجزء الخاص ب css جوج ديال les classes وحدة positif كتعطي لون خلفية أخضر ووحدة negative كتعطي أحمر.

الكود لي زدنا ف style ديال App.vue هو :

                                //App.vue

<style scoped>
    .positif{
        background-color: green;
        padding: 2px;
        color: bisque;
        border-radius: 5px;
    }
    .negative{
        background-color: red;
        padding: 2px;
        color: bisque;
        border-radius: 5px;
    }
</style>
                            

3- تتبع قيمة ل propriété positif

فباش نغير لون خلفية المبلغ خصني نعرف قيمة ل propriété positif يلا كانت true كنعطي اللون الأخضر مكنتش كنعطي الأحمر.

باش ندير هادشي منبعد methods ف App.vue كنزيد ل propriété computed لي كيف شفنا قبل كتراقب القيمة ديال واحد ل variable.

كنزيد fonction classObject لي كتحقق يلا كانت ل propriété positif كتساوي  true  كترجع la classe positif لي زدنا ب css مكانتش كترجع negative.

الكود لي غادي تزيد من بعد methods ف App.vue هو:

                                //App.vue

computed : {
            classObject(){
                return !this.positif ? 'negative' : 'positif';
          }
 }
                            

4- عرض المبلغ فل App.vue

فباش نعرض المبلغ كيف كنشوف فالصورة لي زدنا قبل كنمشي لفوق ل form وكنزيد لمبلغ لي هو ل variable montant لي عندي ف fonction data.

كنزيدو وسط h3 ولي كنخدم ب v-bind:class باش كنزيدلو ل fonction classObject لي زدنا ف computed ولي كتحقق يلا كان صغر من صفر كتعطيه خلفية خضراء كان العكس كتعطيه حمراء.

فدبا وخا غادي تمشي ل http://localhost:8080 غادي تلقى المبلغ كيساوي صفر حيت مازال مزدناش الكود باش نغيرو القيمة ديالو.

التعديل لي درنا على الفورم ف App.vue  هو :

                                    //App.vue

<div class="col-md-6 mx-auto">
                    <h3 class="text-center" v-bind:class="classObject">{{montant}} dh</h3>
                    <div class="card mt-3">
                        <div class="card-body bg-light">
                            <div class="form-inline">
                                <div class="form-group">
                                    <input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success btn-sm mr-2" @click="addGains"><i class="fa fa-plus"></i></button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn-sm" @click="addDepense"><i class="fas fa-minus-square"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>