<template>
<div class="home">
<!-- 排序练习 -->
<button @click="s">升序</button>
<button @click="j">降序</button>
<button @click="cz">重置</button>
<!-- 这是搜索 -->
搜索：<input type="text" v-model="sousuo" />
<button @click="ss">搜索</button>
<!-- 这是表格渲染 -->
<ul v-for="(item, index) in this.newdata" :key="index">
<li>姓名{{ item.goods_name }}价格{{ item.price }}</li>
</ul>
</div>
</template>
<script>
//引入json
import data from "../../public/data.json";
export default {
data() {
return {
//这个data是引入进来的data，需要声明
data,
//这是input绑定的搜索的按钮
sousuo: "",
这是创建的新数组
newdata: [],
};
},
mounted() {
//赋值，让json的data下的data等于创建的新数组
this.newdata = data.data;
},
methods: {
//这是搜索的功能
ss() {
// console.log(this.sousuo);
//判断搜索框里的数据是否为空
if (this.sousuo == "") {
return alert("内容不能为空");
}
// 让他的这个数组过滤，过滤后查找相对应的数据
this.newdata = this.newdata.filter((a) => {
return a.goods_name.includes(this.sousuo);
});
// 让他的input框为空
this.sousuo == "";
},
// 这是重置按钮
cz() {
// 因为我们把数据给了newdata，所以data里的数据不变
this.newdata = data.data;
console.log(this.newdata);
},
// 这是升序按钮
s() {
// 让他里面的数据进行sort排序
this.newdata = this.newdata.sort((a, b) => {
return a.price - b.price;
});
},
// 这是降序按钮
j() {
console.log(1);
// 让他里面的数据进行sort排序
this.newdata = this.newdata.sort((a, b) => {
return b.price - a.price;
});
},
},
name: "HomeView",
components: {},
};
</script>