实际开发，以及浏览器性能差

<template>
  <div>
    <div>
      <!-- <input
        type="text"
        v-model="queryInfo.query"
        @change="queryChange(queryInfo.query)"
        placeholder="请输入商品内容"
      /> -->
      <input type="text" v-model="queryInfo.query" placeholder="请输入商品内容" />
    </div>
    <table>
      <tr>
        <th>编号<button @click="sortS(flag)" id="btnOne">升序</button></th>
        <th>名称</th>
        <th>价格（元）<button @click="sortJ(flag)" id="btnTow">降序</button></th>
      </tr>
      <tr v-for="item in contDatas" :key="item.id">
        <th>{
    
    {
    
     item.id }}</th>
        <th>{
    
    {
    
     item.goods_name }}</th>
        <th>{
    
    {
    
     item.price }}</th>
      </tr>
    </table>
    <!-- 分页 -->
    <Page />
  </div>
</template>

<script>
import data from "@/assets/data.json";
import Page from "@/components/page";
export default {
    
    
  components: {
    
     Page },
  name: "",
  data() {
    
    
    return {
    
    
      res: [],
      contDatas: [],
      queryInfo: {
    
    
        query: "", //搜索关键字
        pagenum: 1, //页数
        pagesize: 5, //每页显示的条数
      },
      flag: false,
    };
  },
  created() {
    
    
    this.res = data.data;
    this.contDatas = this.res;
  },
  mounted() {
    
    },
  methods: {
    
    
  /*
  
    queryChange(serch) {
      console.log("搜索=====>", serch);
      let newData = [];
      for (let i = 0; i < this.res.length; i++) {
        let item = this.res[i];
        if (item.goods_name.indexOf(serch) != -1) {
          newData.push(item);
        }
      }
      this.contDatas = newData;
  */
    },
    // 排序
    // 一、升序
    sortS(flag) {
    
    
      this.flag = !this.flag;
      console.log(flag);
      if (flag == true) {
    
    
        document.getElementById("btnOne").innerHTML = "升序";
        this.res.sort((a, b) => {
    
    
          return a.id - b.id;
        });
      } else {
    
    
        document.getElementById("btnOne").innerHTML = "降序";
        this.res.sort((a, b) => {
    
    
          return b.id - a.id;
        });
      }
    },
    //   二、降序
    sortJ(flag) {
    
    
      this.flag = !this.flag;
      console.log(flag);
      if (flag == true) {
    
    
        document.getElementById("btnTow").innerHTML = "降序";
        this.res.sort((a, b) => {
    
    
          return a.price - b.price;
        });
      } else {
    
    
        document.getElementById("btnTow").innerHTML = "升序";
        this.res.sort((a, b) => {
    
    
          return b.price - a.price;
        });
      }
    },
  },
  computed: {
    
    
  //计算属性 
    contData() {
    
    
    //实现搜索关键字案例
      let resData, queryStr;
      resData = this.res;
      queryStr = this.queryInfo.query;
      resData = this.res.filter((item) => {
    
    
        if (item.goods_name.indexOf(queryStr) != -1) {
    
    
          return item;
        }
      });
      return resData;
    },
  },
  watch: {
    
    },
};
</script>

<style scoped></style>