本地json数据模糊搜索+ json本地数据案例

最新推荐文章于 2024-07-03 14:28:07 发布

头发快掉没了的程序猿

最新推荐文章于 2024-07-03 14:28:07 发布

阅读量740

点赞数

本文链接：https://blog.csdn.net/LiuBo_1999/article/details/115635697

版权

本文介绍了如何在本地实现JSON数据的模糊搜索功能，并提供了一个json本地数据的应用案例，包括html主页、列表、购物车和我的页面的设置，以及在store.js中处理数据的相关操作。

摘要由CSDN通过智能技术生成

本地json数据模糊搜索

在这里插入图片描述

json本地数据案例

html主页

<template>
  <div class="app">
       <router-view />
      <ul>
          <router-link to="/sho" tag="li">首页</router-link>
          <router-link to="/lie" tag="li">列表</router-link>
          <router-link to="/gowu" tag="li">购物车</router-link>
          <router-link to="/wode" tag="li">我的</router-link>
      </ul>
  </div>
</template>

<script>
export default {
    
  name: '',
  data() {
    
    return {
    };
  },
  mounted() {
     
//this.axios.get('/').then((res) => {
    
//this.result = res.result;
//});
},
  methods: {
    },
  computed: {
    },
  watch: {
    },
};
</script>
<style lang="scss" scoped>
.app{
    
    width: 100%;
    height: 100%;
    ul{
    
        width: 100%;
        height: 50px;
        background: #666;
        display: flex;
        position: fixed;
        bottom: 0;
        li{
    
        width: 25%;
        text-align: center;
        line-height: 50px;
        }
    }
}
.router-link-active{
    
    background: blue;
    font-size: 20px;
    color: #fff;
}
</style>

首页

<template>
  <div>
    <van-search
      v-model="keyword"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-tabs v-model="inde">
      <van-tab
        v-for="(item, index) in result"
        :title="item.title"
        :key<