vue里获取ul下全部li元素组成伪数组，转成数组forEach遍历获取每个li的高度

最新推荐文章于 2023-03-31 16:31:24 发布

丶久友

最新推荐文章于 2023-03-31 16:31:24 发布

阅读量4.9k

点赞数

分类专栏：个人笔记 Vue从零到一文章标签： VUE里获取ul下li的高度

本文链接：https://blog.csdn.net/weixin_44614772/article/details/90005589

版权

Vue从零到一同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

个人笔记

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p v-for="count in 10">第{{count}}次, 总计 10次</p>

    <ul ref="ulParent">
        <li style="height: 60px;">1</li>
        <li style="height: 30px;">2</li>
        <li style="height: 50px;">3</li>
        <li style="height: 160px;">4</li>
        <li style="height: 10px;">5</li>
    </ul>

    <button @click="getAllLiHeight()">获取高度数组</button>
    <button @click="dealSome()">验证some</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data: {
           dataArr: ['哼哼', 'itlike11.com', '哈哈哈哈']
        },
        methods: {
            getAllLiHeight(){
                let liHeightArr = [];
                // 1. 获取dom元素
                let allLis = this.$refs.ulParent.getElementsByTagName('li');
                // console.log(allLis);
                // console.log(Array.prototype.slice.call(allLis));
                	//把伪数组转成数组
                Array.prototype.slice.call(allLis).forEach(li => {
                	//获取每个li的高度，并追加到数组中
                    liHeightArr.push(li.clientHeight);
                });
                console.log(liHeightArr);
            },
					//some方法的使用
            dealSome(){
                let result = this.dataArr.some((str)=>{
                //如果数组里有 'itlike.com'则返回true，没有就返回false
                    return str === 'itlike.com';
                });
                console.log(result);
            }
        }
    });
</script>
</body>
</html>

丶久友

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue里获取ul下全部li元素组成伪数组，转成数组forEach遍历获取每个li的高度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <p v-for="count in 10"...
复制链接

扫一扫