web蓝桥杯真题：菜单树检索

代码及注释：

html 复制代码

<div id="app">
	<input type="text" @input="searchData" v-model="search" placeholder="请输入要搜索的菜单内容"/>
	<ul>
		<li v-for="item1 in resultList">    //遍历
			<span :style="{'background-color': item1.meta.title.includes(search) && search !== '' ? 'yellow' : ''}" >{{item1.meta.title}}</span>    //判断是否包含关键字并且关键字不为空
			<ul>
				<li v-for="item2 in item1.children">
					<span :style="{'background-color': item2.meta.title.includes(search) && search !== '' ? 'yellow' : ''}">{{item2.meta.title}}</span>
				</li>
			</ul>
		</li>
	</ul>
</div>

javascript 复制代码

const app = new Vue({
  el:"#app",
  // 在此处补全代码，实现二级菜单搜索功能
  data: {
    search: '',
    list: [],
    resultList: []
  },
  created() {     
      axios.get('./data.json').then(res => {    //请求获取数据
        this.list = res.data
        this.resultList = res.data
      })
  },
  methods: {
    searchData() {
      this.resultList = []
      let set = new Set    //创建一个Set对象，实现去重功能，这样就避免多次添加带来的问题
      this.list.forEach(item1 => {    
        if(item1.meta.title.search(this.search) !== -1) {
          set.add(item1)    //一级菜单循环，检索到就添加
        }
        if(item1.children) {   
          item1.children.forEach(item2 => {   //二级菜单循环，检索到就添加
            if(item2.meta.title.search(this.search) !== -1) {
              set.add(item1)
            }
          })
        }
      })
      this.resultList = set
    },
  }
});

知识点：

1.forEach

array.forEach(callbackFn(currentValue, index, arr), thisValue)

箭头函数 forEach((element, index, array) => { /* ... */ })

参数	描述
callbackFn(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数：下图
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

不支持continue、break，没有返回值，不改变原数组（尽管在回调中会改变原数组）

2.set去重

javascript 复制代码

const set = new Set()
set.add(1)   //在不重复的情况下添加
set.delete(1)  //删除
set.has(1) //存在，返回true
set.size  //长度

3.created

created是一个生命周期钩子函数，在Vue实例创建后立即调用，在函数中，我们可以进行一些初始化操作，如请求函数

4.动态渲染元素样式

html 复制代码

<div :style="{'background-color': 1 + 1 == 2 ? 'yellow' : ''}"></div>