筛选栏过多，控制‘更多‘和‘收起‘按钮的显示和隐藏

• 需求：筛选栏默认展示两行，超过两行时，出现更多和收起按钮

html部分

  <div  class="screen_list">
                <span class="screen_list_title">项目 : </span>
                <div class="screen_list_info">
                    <span class="info_b" v-for="(item,index) of screen_3" :key="index"
                        @click='screenSelect3(item.project_id)' :class="{active:screen_select_3==item.project_id}">
                        {{item.name}}</span>
                </div>
                <span class="more_screen_c">
                    <span @click="moreScreenOpen($event)" id="open3" class="more_screen more_screen_open">
                        <span>更多</span>
                        <img src="../../../../static/images/project/open.png" alt="">
                    </span>
                    <span @click="moreScreenClose($event)" id="close3" class="more_screen more_screen_close">
                        <span>收起</span>
                        <img src="../../../../static/images/project/arrow_top.png" alt="">
                    </span>
                </span>
 </div>

CSS部分（节选）

/* 高度超出两行时 */
.screen .screen_list .screen_list_info.height_beyond {
max-height:70px ;
overflow: hidden;
}
/* 高度超出两行时，并点击查看更多时 */
.screen .screen_list .screen_list_info.list_more{
    max-height:10000px;
}

js部分

//封装函数，筛选栏过多时，显示更多和收起按钮
function beyondScreen() {
   setTimeout(() => {
       var screenHeight_list = $(".screen_list_info");
       for (var i = 0; i < screenHeight_list.length; i++) {
           $('.screen_list_info').eq(i).removeClass('height_beyond');
           $('.screen_list_info').eq(i).next().css('display', 'none');
           if (screenHeight_list[i].clientHeight > 75) {
               $('.screen_list_info').eq(i).addClass('height_beyond');
               $('.screen_list_info').eq(i).next().css('display', 'inline-block');
           }
       }
   }, 400)
};

//DOM加载完毕后调用方法即可，如果筛选栏的内容更新，需要重新调用该函数
window.onload=function(){
beyondScreen();
}

// 展开
       moreScreenOpen(e) {
           $("#" + e.currentTarget.id).parent().parent().children('.screen_list_info').addClass("list_more");
           $("#" + e.currentTarget.id).css('display', 'none')
           $("#" + e.currentTarget.id).next().css('display', 'inline-block')
       },
// 收起
       moreScreenClose(e) {
           $("#" + e.currentTarget.id).parent().parent().children('.screen_list_info').removeClass("list_more");
           $("#" + e.currentTarget.id).css('display', 'none')
           $("#" + e.currentTarget.id).prev().css('display', 'inline-block')
       },

vue中监听数据变化，并重新调用函数

computed: {
      // 同时监听多个数据
        allLatlngs() {
            const { screen_2, screen_3 } = this;
            return {
                screen_2, screen_3
            };
        },
    },
watch: {
        // 同时监听多个数据
        allLatlngs() {
            beyondScreen();
        },
        
        //监听多个数据变化
		 screen_3: {
            handler(newVal, oldVal) {
            	//newVal变化前的值, oldVal变化后的值
                beyondScreen();
            },
            deep: true,
            immediate: false,
        }, 
        
//handler：其值是一个回调函数。即监听到变化时应该执行的函数。
//deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代 JavaScript 的限制 (以及废弃 Object.observe )，Vue 不能检测到对象属性的添加或删除）。
//immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。
},