tiktok นับยอดวิวยังไง

ใน Vue.js, คุณสามารถใช้ข้อมูลแบบ array ในคุณสมบัติของ data ในคอมโพเนนต์ Vue เพื่อเก็บข้อมูลที่เปลี่ยนแปลงได้ที่จะนำมาแสดงผลในแอปพลิเคชันของคุณ นี่คือตัวอย่างการใช้ array ใน Vue.js:

<template>
  <div>
    <h1>รายการสิ่งของ</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <button @click="addItem">เพิ่มสิ่งของ</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'หนังสือ' },
        { id: 2, name: 'เสื้อผ้า' },
        { id: 3, name: 'รองเท้า' }
      ]
    };
  },
  methods: {
    addItem() {
      // เพิ่มสิ่งของใหม่ลงใน array
      const newItem = { id: this.items.length + 1, name: 'สิ่งของใหม่' };
      this.items.push(newItem);
    }
  }
};
</script>

ในตัวอย่างนี้, เรามี array ชื่อ items ซึ่งใช้สำหรับเก็บรายการสิ่งของที่เราต้องการแสดงผลในลิสต์ <ul> ภายใน Template Vue.js. เราสามารถใช้ v-for directive เพื่อแสดงรายการสิ่งของทั้งหมดใน array items.

เมื่อคลิกที่ปุ่ม “เพิ่มสิ่งของ,” เราใช้ methods addItem เพื่อเพิ่มสิ่งของใหม่ลงใน array items โดยสร้างข้อมูลใหม่และใช้ push() เพื่อเพิ่มข้อมูลใหม่เข้าไปใน array.

นั่นคือวิธีใช้ array ใน Vue.js เพื่อจัดเก็บและแสดงข้อมูลที่มีการเปลี่ยนแปลงในแอปพลิเคชันของคุณ.