当前位置：首页 > VUE

vue实现搜索脚本之家

2026-02-23 04:24:40VUE

Vue实现搜索脚本之家

安装Vue.js

确保项目已安装Vue.js。可以通过CDN引入或使用npm安装：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

或通过npm：

vue实现搜索脚本之家

npm install vue

创建Vue实例

在HTML中创建一个Vue实例，并绑定到DOM元素：

<div id="app">
  <input v-model="searchQuery" placeholder="搜索脚本之家">
  <button @click="search">搜索</button>
  <ul>
    <li v-for="result in searchResults" :key="result.id">
      {{ result.title }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    searchQuery: '',
    searchResults: []
  },
  methods: {
    search() {
      if (this.searchQuery.trim() === '') return;
      // 调用搜索API或模拟数据
      this.mockSearch();
    },
    mockSearch() {
      // 模拟搜索结果
      this.searchResults = [
        { id: 1, title: '脚本之家教程1' },
        { id: 2, title: '脚本之家教程2' }
      ];
    }
  }
});
</script>

调用API搜索

如果需要调用脚本之家的搜索API，可以使用axios或fetch：

vue实现搜索脚本之家

methods: {
  async search() {
    try {
      const response = await fetch(`https://api.example.com/search?q=${this.searchQuery}`);
      this.searchResults = await response.json();
    } catch (error) {
      console.error('搜索失败:', error);
    }
  }
}

添加样式

为搜索框和结果列表添加基本样式：

#app {
  max-width: 600px;
  margin: 0 auto;
}
input {
  width: 70%;
  padding: 8px;
}
button {
  padding: 8px 16px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

优化搜索体验

添加防抖功能，避免频繁调用API：

data() {
  return {
    searchQuery: '',
    searchResults: [],
    debounceTimer: null
  };
},
methods: {
  search() {
    clearTimeout(this.debounceTimer);
    this.debounceTimer = setTimeout(() => {
      if (this.searchQuery.trim() === '') return;
      this.mockSearch();
    }, 500);
  }
}