استایل‌دهی پویا با اشیاء

Dynamic Styling with Objects

توسط

26 شهریور 1399

تا این قسمت مطالب زیادی را راجع به خروجی گرفتن از داده ها و نمایش آن ها در صفحه را یا گرفتیم و می دانیم که از دستوراتی مانند v-on زیاد استفاده خواهیم کرد. مشکل اینجاست که تایپ کردن این موارد کمی طول می کشد (به دلیل اینکه خیلی زیاد از آن ها استفاده می شود). بنابراین قبل از اینکه در مورد استایل دهی صحبت کنیم در مورد روش میانبری برای نوشتن این دستورات بحث می کنیم.

برای خلاصه نویسی event ها می توانید v-on را با یک علامت @ ساده جایگزین کنید!

    <button @click="counter++">Increase</button>

1	<button @click="counter++">Increase</button>

برای خلاصه نویسی دستور v-bind نیز می توانید آن را به شکل زیر بنویسید:

    <a :href="link">Link</a>

1	<a :href="link">Link</a>

یعنی v-bind حذف شده و فقط علامت دو نقطه باقی می ماند. من در طول دوره از این روش برای کدنویسی استفاده می کنم بنابراین حتما آن را حفظ کنید.

استایل دهی با Vue

یکی دیگر از عملیات های بسیار کاربردی در Vue استایل دهی می باشد. به کدهای زیر نگاه کنید:

کدهای HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</div>

</div>

کدهای جاوا اسکرپیت:

new Vue({
    el: '#app'
})

new Vue({

el: '#app'

})

کدهای CSS:

.demo {
    width: 100px;
    height: 100px;
    background-color: gray;
    display: inline-block;
    margin: 10px;
}

.demo {

width: 100px;

height: 100px;

background-color: gray;

display: inline-block;

margin: 10px;

}

این کدها برای شروع پروژه این جلسه هستند. شما می توانید خروجی آن را در این صفحه Jsfiddle مشاهده کنید. این کدها چیز خاصی ندارند بلکه 3 div مربعی شکل هستند که با رنگ خاکستری پُر شده اند. من این کدها را به شما داده ام تا از این قسمت به بعد با من جلو بیایید و کدنویسی کنید.

من می خواهم در این جلسه با نحوه اضافه کردن کلاس ها به عناصر HTML آشنا شویم بنابراین سه کلاس CSS دیگر را در کدهای CSS تعریف می کنم:

.demo {
    width: 100px;
    height: 100px;
    background-color: gray;
    display: inline-block;
    margin: 10px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.demo {

width: 100px;

height: 100px;

background-color: gray;

display: inline-block;

margin: 10px;

}

.red {

background-color: red;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

ما می خواهیم کلاس های red و blue و green را با استفاده از Vue به سه div موجود در کدهای HTML متصل کنیم تا رنگ آن ها را تغییر دهیم. بیایید در ابتدا ساده شروع کنیم. می گوییم اگر روی مربع اول کلیک کردیم، باید کلاس red به آن اضافه شود و اگر دوباره کلیک کردیم، کلاس red از آن گرفته شود. برای این کار ابتدا می گوییم:

new Vue({
    el: '#app',
    data: {
        attachRed: false
    }
})

new Vue({

el: '#app',

data: {

attachRed: false

}

})

خصوصیت attachRed در حالت پیش فرض false است یعنی نمی خواهم در همان ابتدا رنگ قرمز روی مربع من اعمال شود. حالا در کدهای HTML می گوییم:

<div id="app">
    <div class="demo" @click="attachRed= !attachRed"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</div>

</div>

همانطور که قبلا هم گفتیم حتما لازم نیست که همیشه نام تابعی را به event ها پاس بدهید بلکه می توانید کدهای خود را به صورت دستی (مانند کد بالا) بنویسید. این کد می گوید attachRed را در هنگام کلیک شدن، دقیقا برعکس حالت فعلی خود تنظیم کن. علامت ! یعنی برعکس حالت یا چیزی.

حالا برای اینکه بتوانیم کلاس CSS ای را به صورت مشروط (بر اساس شرطی خاص) به عنصری اضافه کنیم باید آن را به خصوصیت رزرو شده class در Vue متصل کنیم (یعنی bind کنیم). بنابراین:

 <div id="app">
    <div class="demo" @click="attachRed= !attachRed" :class="{red: attachRed}"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</div>

</div>

همانطور می بینید مقداری که به خصوصیت class پاس داده می شود باید یک شیء جاوا اسکریپتی باشد (الزامات Vue) که نام کلاس مورد نظر را به صورت نام خصوصیت بگیرد. به عنوان مقدار این خصوصیت نیز باید یا true یا false پاس داده شود به طوری که true یعنی این کلاس را متصل کن و false یعنی متصل نکن. من attachRed را پاس داده ام که یک خصوصیت در Data بود و در حالت پیش فرض روی false تنظیم شده است.

نکته: اگر نام کلاس شما دارای کاراکترهای خاص مانند خط فاصله بود باید نام خصوصیت پاس داده شده به class را حتما درون single quotation بگذارید:

    <div class="demo" @click="attachRed= !attachRed" :class="{'my-red': attachRed}"></div>

1	<div class="demo" @click="attachRed= !attachRed" :class="{'my-red': attachRed}"></div>

شما می توانید خروجی کد بالا را در این صفحه Jsfiddle مشاهده کنید. با کلیک کردن روی مربع اول، رنگ آن به قرمز تغییر کرده و با کلیک دوباره، به خاکستری برمی گردد.

احتمالا برای شما هم این سوال پیش آمده است که اگر نخواهیم شیء پاس داده شده به class را در کدهای HTML بنویسیم باید چه کار کنیم؟ پروژه ما در حال حاضر بسیار ساده است بنابراین جای نگرانی نیست اما در پروژه های بزرگ تر این شیء بسیار بزرگ و شلوغ خواهد شد. حتی اگر یک خط کد دیگر اضافه کنم هم شلوغ می شود:

<div id="app">
    <div class="demo" @click="attachRed= !attachRed" :class="{red: attachRed, blue: !attachRed}"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</div>

</div>

من در اینجا گفته ام اگر attachRed برابر False بود رنگ آبی را برای مربع انتخاب کن. همین کد ساده باعث شلوغ تر شدن کار ما شده است. برای حل این مشکل می توانیم از computed استفاده کنیم:

new Vue({
    el: '#app',
    data: {
        attachRed: false
    },
    computed: {
        divClasses: function () {
            return {
                red: this.attachRed,
                blue: !this.attachRed
            }
        }
    }
})

new Vue({

el: '#app',

data: {

attachRed: false

computed: {

divClasses: function () {

return {

red: this.attachRed,

blue: !this.attachRed

}

})

از آنجایی که کار ما به خصوصیت attachRed و تغییر آن وابسته است باید از computed استفاده نماییم. همچنین می دانیم که تمام خصوصیات computed یک تابع هستند بنابراین آن را در قالب یک تابع تعریف می کنیم که شیء مورد نظر ما را به ما برمی گرداند. همچنین یادتان باشد که وقتی درون شیء Vue هستیم باید از کلیدواژه this برای دسترسی به خصوصیات مختلف استفاده کنیم.

در نهایت می توانیم در کدهای HTML از این خصوصیت استفاده کنیم:

<div id="app">
    <div class="demo" @click="attachRed= !attachRed" :class="divClasses"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</div>