اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب:
یک دقیقه
در این قسمت به بحث item listها پرداخته می‌شود. روند کلی بدین صورت است که ابتدا یک آرایه را ایجاد کرده (با مقادیر مشخص) و سپس درون تگ مورد نظری از صفحه، آرایه را فراخوانی می‌کنیم.
برای این منظور ابتدا یک vue جدید را ساخته و سپس آرایه مورد نظر را تعریف کرده و آیتم‌های آرایه را مشخص می‌کنیم. به صورت زیر:
var dotnettips = new Vue({
el: '#dotnettips',
data: {
items: [
{ message: 'one' },
{ message: 'two' }
]
}
}); حال زمان آن فرارسیده است تا بدنه اصلی ساختار صفحه را بنویسیم.
<html>
<body>
<ul id="dotnettips">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script src="https://unpkg.com/vue@2.2.6">
</script>
<script type="text/javascript">
var dotnettips = new Vue({
el: '#dotnettips',
data: {
items: [
{ message: 'one' },
{ message: 'two' }
]
}
});
</script>
</body>
</html> .حال با اجرای کد فوق تمامی آیتم‌های مورد نظر روی صفحه به نمایش در می‌آیند
.دقت نمائید که کدهای فوق و بدنه اسکریپت به دلخواه نوشته شده‌است و شما طبق نیاز خود می‌توانید آن‌ها را تغییر دهید