لیست‌ها و فیلترها در Vue.js
در Vue.js، کار با لیست‌ها و اعمال فیلترها برای نمایش و پردازش داده‌ها بسیار رایج است. با استفاده از ویژگی‌ها و دایرکتیوهای خاص، می‌توانید داده‌ها را به راحتی در لیست‌ها نمایش دهید و فیلترهایی را برای پردازش آن‌ها اعمال کنید. در اینجا به بررسی نحوه استفاده از لیست‌ها و فیلترها در Vue.js خواهیم پرداخت.
لیست‌ها در Vue.js
یکی از ویژگی‌های رایج در Vue.js این است که می‌توانید داده‌ها را به‌طور داینامیک در یک لیست نمایش دهید. با استفاده از دایرکتیو v-for می‌توان داده‌ها را به‌طور خودکار در DOM تکرار کرد.
۱. نمایش داده‌ها در لیست‌ها با v-for
دایرکتیو v-for به شما این امکان را می‌دهد که داده‌ها را از یک آرایه یا شیء تکرار کرده و در قالب لیست در HTML نمایش دهید.
مثال استفاده از v-for برای نمایش لیست:
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['آیتم 1', 'آیتم 2', 'آیتم 3']
}
}
}
</script>
در اینجا:
- v-for="item in items" برای تکرار و نمایش هر آیتم از آرایه items در یک لیست استفاده می‌شود.
- برای جلوگیری از مشکلات در render، از :key="item" برای شناسایی هر عنصر استفاده می‌شود.
۲. استفاده از v-for برای لیست‌های پیچیده‌تر (آرایه‌های شیء)
اگر داده‌های شما شامل شیء‌ها باشند، می‌توانید از v-for برای دسترسی به کلیدها و مقادیر شیء استفاده کنید.
مثال استفاده از v-for برای آرایه‌های شیء:
<div>
<ul>
<li v-for="(value, key) in person" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
person: {
name: 'محمد',
age: 30,
job: 'مطور'
}
}
}
}
</script>
در اینجا:
- v-for="(value, key) in person" برای تکرار هر کلید و مقدار در شیء person استفاده می‌شود.
فیلترها در Vue.js
در Vue.js، فیلترها به شما این امکان را می‌دهند که داده‌ها را قبل از نمایش در UI پردازش کنید. فیلترها می‌توانند برای قالب‌بندی داده‌ها، اعمال تغییرات یا حتی تغییرات ساده مانند تاریخ یا تغییر متن به حروف بزرگ/کوچک استفاده شوند.
۳. استفاده از فیلترها در Vue.js
برای استفاده از فیلترها، می‌توانید یک فیلتر خاص را در گزینه‌های Vue (در شیء filters) تعریف کنید و سپس آن را در قالب‌های خود استفاده کنید.
مثال استفاده از فیلتر برای قالب‌بندی متن:
<div>
<p>{{ message | uppercase }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'سلام دنیا!'
}
},
filters: {
uppercase(value) {
return value.toUpperCase();
}
}
}
</script>
در اینجا:
- {{ message | uppercase }} از فیلتر uppercase برای تبدیل متن به حروف بزرگ استفاده می‌کند.
- فیلتر در بخش filters در Vue تعریف شده است.
۴. استفاده از فیلترها برای نمایش تاریخ
فیلترها می‌توانند برای تبدیل داده‌ها به فرمت‌های مختلف، مانند تاریخ، استفاده شوند.
مثال استفاده از فیلتر برای قالب‌بندی تاریخ:
<div>
<p>{{ date | formatDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
date: '2025-03-18'
}
},
filters: {
formatDate(value) {
let date = new Date(value);
return date.toLocaleDateString(); // فرمت تاریخ
}
}
}
</script>
در اینجا:
- فیلتر formatDate تاریخ ورودی را به فرمت قابل فهم نمایش می‌دهد.
۵. استفاده از فیلترها در v-for
شما می‌توانید فیلترها را در داخل v-for نیز استفاده کنید تا داده‌ها را قبل از نمایش تغییر دهید.
مثال استفاده از فیلتر در v-for:
<div>
<ul>
<li v-for="item in items | filterItems" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['آیتم 1', 'آیتم 2', 'آیتم 3', 'آیتم 4']
}
},
filters: {
filterItems(items) {
return items.filter(item => item.includes('2')); // فقط آیتم‌هایی که "2" دارند را فیلتر می‌کند
}
}
}
</script>
در اینجا:
- | filterItems فیلتر filterItems را روی آرایه items اعمال می‌کند و فقط آیتم‌هایی را که شامل عدد "2" هستند، نمایش می‌دهد.
ملاحظات استفاده از فیلترها در Vue
- فیلترها تنها برای تغییر نمایش داده‌ها و قالب‌بندی آن‌ها در UI استفاده می‌شوند و نباید برای پردازش داده‌ها یا انجام عملیات پیچیده به کار روند.
- فیلترها می‌توانند در متغیرهای محلی Vue مانند data، computed properties و همچنین در داخل v-for یا هنگام استفاده از متغیرهای متنی داخل {{}} قرار گیرند.
- برای فیلترهای پیچیده‌تر یا عملکردهای پیشرفته‌تر، از computed properties یا methods استفاده کنید.
جمع‌بندی
- لیست‌ها در Vue: با استفاده از دایرکتیو v-for می‌توانید داده‌ها را از آرایه‌ها و اشیاء به‌طور داینامیک تکرار و نمایش دهید.
- فیلترها در Vue: فیلترها به شما این امکان را می‌دهند که داده‌ها را قبل از نمایش در UI پردازش کنید، مانند تبدیل متن به حروف بزرگ یا قالب‌بندی تاریخ.
- فیلترها می‌توانند در قالب‌های متنی، آرایه‌ها و لیست‌ها و در v-for استفاده شوند.
استفاده از لیست‌ها و فیلترها در Vue به شما کمک می‌کند که رابط کاربری انعطاف‌پذیر و داینامیک‌تری بسازید که داده‌ها را به‌طور مؤثر و قابل فهم برای کاربر نمایش دهد.
