Auto commit

src/App.vue

@@ -4,19 +4,14 @@
     <!-- <div v-html="brightenKeyword(list, text)"></div> -->
     ---------------------------------------------------------------
     <br />
-    <input
-      type="text"
-      @keyup.enter="getMachlist"
-      v-model="wordage"
-      placeholder="请输入关键字"
-    />
+    <div>
+      切换显示文本:
+      <button @click="isshow = true">原文本</button>
+      <button @click="isshow = false">匹配文本</button>
+    </div>
+    <input type="text" @keyup.enter="getMachlist" v-model="wordage" placeholder="请输入关键字" />
     <input type="button" @click="getMachlist" value="确定" />
-    <div
-      style=""
-      v-for="item in machlist"
-      :key="item.id"
-      v-html="item.title"
-    ></div>
+    <div style="" v-for="item in machlist" :key="item.id" v-html="item.title"></div>
   </div>
 </template>
 
@@ -55,6 +50,7 @@ export default {
       ], //全部列表
       machlist: [], // 匹配列表
       wordage: "", //搜索框输入的值
+      isshow: true//是否显示原文本
     };
   },
   mounted() {
@@ -68,6 +64,9 @@ export default {
         this.getMachlist();
       }
     },
+    isshow(){
+      this.getMachlist();
+    }
   },
   methods: {
     // 模糊查询 高亮匹配
@@ -92,17 +91,31 @@ export default {
       // 声明正则校验  (正则表达式,"匹配模式")  /gi(全文查找、忽略大小写)
       const reg = new RegExp(value, "gi");
       // 循环遍历  this.list 使用数据进行渲染  resultList 使用只符合条件的数据
-      this.list.forEach((item) => {
-        let obj = {
-          id: item.id,
-          title: item.title.replace(
-            reg,
-            //筛选出来的文字加样式
-            (val) => `<span style='color:red'>${val}</span>`
-          ),
-        };
-        dataList.push(obj);
-      });
+      if (this.isshow) {
+        this.list.forEach((item) => {
+          let obj = {
+            id: item.id,
+            title: item.title.replace(
+              reg,
+              //筛选出来的文字加样式
+              (val) => `<span style='color:red'>${val}</span>`
+            ),
+          };
+          dataList.push(obj);
+        });
+      } else {
+        resultList.forEach((item) => {
+          let obj = {
+            id: item.id,
+            title: item.title.replace(
+              reg,
+              //筛选出来的文字加样式
+              (val) => `<span style='color:red'>${val}</span>`
+            ),
+          };
+          dataList.push(obj);
+        });
+      }
       // 赋值
       this.machlist = dataList;
     },
@@ -111,9 +124,9 @@ export default {
 </script>
 
 <style  scoped>
-.home{
+.home {
   width: 100%;
-text-align: center;
-margin: 0 auto;
+  text-align: center;
+  margin: 0 auto;
 }
 </style>
\ No newline at end of file