个人项目示例

简单说一下在商品搜索这个页面我的大致完成思路：

首先我将其静态完成之后对与动态的完成大致分为:新建函数、引入函数、 调用函数

1.从api中新建获取模糊搜索数据的函数

 

搜索组件中引入模糊搜索函数

给input添加v-modle=一个自定义的空字符串search keyword，使用户在搜索框中输入的内容保存到这个空字符串中

 

2.然后，定义一个方法，引用api中获取数据的函数（getItems）传参为this.search keyword

保存到res中，这时搜索到的数据已经传到了res中，新建一个空数组searchItems来接收res中的数据

 

最后将searchitems v-for循环到指定位置即可

 

 

 

 对于这个搜索的功能：

1、点击事件：

定义一个点击事件通过点击事件调用api封装的函数   getcreateId（改特格瑞太奥的）

来获取分类对应的商品数据

传输的是点击分类的ID item.id（当前元素的id）

 

<li  v-for="(item,i) in fenlei" :key="i" @click="getcreateId(item.id)">
    &nbsp;&nbsp;{{item.name}}&nbsp;&nbsp;
</li>

 

 

2、将后端传输过来的商品信息赋值给data 里的fenlei在页面中循环V-for这个数据

 

搜索功能：（点击事件和回车事件）

 

点击事件和回车事件都是调用的一个方法

 

定义一个点击事件和一个回车事件通过调用点击事件或回车事件调用api封装的函数getItems来获取搜索到的商品数据

传输的是输入框里的字符串

将后端传输的 将后端传输过来的商品信息赋值给data 里的 searchItems在页面中循环V-for这个数据