Vue外包笔试题（利用：过滤，判断字符串，排序）

最新推荐文章于 2024-06-10 14:44:57 发布

00不吃香菜.

最新推荐文章于 2024-06-10 14:44:57 发布

阅读量74

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/llj1028/article/details/128512918

版权

用子组件给父组件传值的方法：

利用到子组件给父组件传值
1、注册自定义事件（连接子组件与父组件直接的传值）
2、用子组件$emit给父组件传递参数
外包题分析：
1.搭建静态页面
2.判断动，静态
3. 分析逻辑处理(子传父传值，传递的是input框的值，以及点击更换页面绑定v-show 传递true的值，然后input框搜索用到 es6方法filter过滤,includes通过判断字符串，然后通过 if 判断用sort方法进行排序)
css样式：（不重要）

 <style>
        .ulList {
            width: 800px;
            height: 400px;
            border: 1px solid black;
            padding-inline-start: 0;
        }
        .ulList1 {
            width: 800px;
            height: 400px;
            border: 1px solid black;
            padding-inline-start: 0;
            display: flex;
        }
        li {
            list-style: none;
        }
        .li1 {
            width: 100%;
            border-bottom: 1px solid black;
        }
        .li2 {
            width: 100px;
            height: 50px;
            border: 1px solid black;
        }
        .listSort{
            display: flex;
        }
    </style>

父子组件：

<body>
    <div id='app'>
        <!-- 子组件 -->
        <!-- 注册事件 -->
        <div class="listSort">
            <child @tolist="tolist1" @vtolist="vtolist1"></child>
            <button @click="rise" >升序</button>
        </div>
        <div class="headerBox">
            <ul class="ulList" v-if="show">
                <li v-for="(item,index) in listArrObj()" :key="item.id" class="li1">{{item.txt}}</li>
            </ul>
            <ul class="ulList1" v-if="!show">
                <li v-for="(item,index) in listArrObj()" :key="item.id" class="li2">{{item.txt}}</li>
            </ul>
        </div>
    </div>
    <template id="headObj">
        <div>
            <button @click="listbtn">列表视图</button>
            <button @click="networkbtn">网络视图</button>
            
            <!-- 输入框键盘抬起事件 -->
            <input type="text" v-model="listname" @keyUp="lift">
        </div>
    </template>

script区域：

 <script>
        // 子组件
        Vue.component('child', {
            template: '#headObj',
            data() {
                return {
                    listname: '',  
                }
            },
            methods: {
                // 键盘抬起事件
                lift() {
                    // 向父组件传值
                    this.$emit('tolist', this.listname)
                },
                // 点击传递数据，更换视图  列表视图
                listbtn() {
                    // 向父组件传值
                    this.$emit('vtolist', true)
                },
                // 点击传递数据，更换视图  网络视图
                networkbtn() {
                    this.$emit('vtolist', false)
                },
            },
        })
        const vm = new Vue({
            el: '#app',
            data: {
                // // 
                listArr: [
                    {
                        id: 3,
                        txt: 'test3.txt'
                    },
                    {
                        id: 2,
                        txt: 'test2.txt'
                    },
                    {
                        id: 1,
                        txt: 'test1.txt'
                    },
                    {
                        id: 4,
                        txt: 'test4.txt'
                    },
                    {
                        id: 5,
                        txt: 'testtest5.txt'
                    }
                ],
                // listObj: ['test2.txt', 'test1.txt', 'test3.txt', 'test4.txt', 'testtest5.txt'],
                flag: true,
                getson: '',
                show: true,
                
            },
            methods: {
                // 父组件接受值  列表视图  网络视图
                tolist1(text) {
                    this.getson = text
                },
                 // 父组件接受值
                vtolist1(show) {
                    this.show = show
                },
                listArrObj() {
                    // console.log(this.listObj.filter((item, index) => item.includes(this.getson)));
                    return this.listArr.filter((item, index) => item.txt.includes(this.getson))
                },
                rise(){
                    console.log(111);
                    if(this.flag){
                        this.listArr = this.listArrObj().sort(function(a,b){
                            return a.id - b.id
                        })
                        this.flag =  !this.flag
                    }else{
                        this.listArr = this.listArrObj().sort(function(a,b){
                            return b.id - a.id
                        })
                        this.flag =  !this.flag
                    }
                    
                }
            },
        })
        /* 
            利用到子组件给父组件传值  
            1、注册自定义事件  （连接子组件与父组件直接的传值）
            2、用子组件$emit给父组件传递参数
            外包题分析：
            1、搭建静态页面
            2、判断动，静态
            3、分析逻辑处理(子传父传值，传递的是input框的值，以及点击更换页面绑定v-show 传递true的值，然后input框搜索用到 es6方法filter过滤,includes通过判断字符串
                然后用sort方法进行排序)
         */
    </script>