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

การสร้าง dropdown (เมนูแบบเลื่อนลงมา) ใน Vue.js สามารถทำได้โดยใช้ <select> element ร่วมกับ v-model directive เพื่อจัดการค่าที่เลือกได้ง่ายๆ นี่คือตัวอย่างการสร้าง dropdown ใน Vue.js:

<template>
  <div>
    <label for="fruit">เลือกผลไม้:</label>
    <select id="fruit" v-model="selectedFruit">
      <option value="apple">แอปเปิ้ล</option>
      <option value="banana">กล้วย</option>
      <option value="cherry">เชอร์รี่</option>
      <option value="grape">องุ่น</option>
      <option value="orange">ส้ม</option>
    </select>

    <p>คุณเลือกผลไม้: {{ selectedFruit }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: '' // ค่าเริ่มต้น
    };
  }
};
</script>

ในตัวอย่างนี้เราใช้ <select> element เพื่อสร้าง dropdown โดยมีตัวเลือกหลายตัวเป็นผลไม้ต่างๆ และใช้ v-model เพื่อเชื่อมต่อค่าที่เลือกกับ selectedFruit ใน Vue instance. เมื่อผู้ใช้เลือกผลไม้จาก dropdown, selectedFruit จะถูกอัพเดตอัตโนมัติและแสดงผลใน <p> ด้านล่าง.

คุณสามารถปรับแต่ง dropdown ของคุณโดยเพิ่มตัวเลือกเพิ่มเติมหรือสร้างค่าเริ่มต้นให้กับ selectedFruit ตามความต้องการของคุณ.