<!-- 引入axios.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    findForm: {
                        name: '',
                        gender: '',
                        position: ''
                    },
                    users: [] // 用于存儲(chǔ)查詢結(jié)果的用戶數(shù)據(jù)數(shù)組
                };
            },
            methods: {
                showMessage() {
                    // 這里可以添加實(shí)際的查詢邏輯
                    axios.get(`https://webserver.ma.net/emps/list?name=${this.findForm.name}&gender=${this.findForm.gender}&job=${this.findForm.position}`)
                        .then(response => {
                            this.users = response.data.data;
                        })
                        .catch(error => {
                            console.error('查詢用戶數(shù)據(jù)失敗:', error);
                        })
                },
                  // 清空查詢表單
                clearForm() {
                    this.findForm = {
                        name: '',
                        gender: '',
                        position: '',
                    }
                    this.showMessage(); // 清空后重新查詢，獲取所有用戶數(shù)據(jù)
                }
            }
        }).mount('#app');
    </script>