vue中使用ref属性进行全选反选功能的实现

最新推荐文章于 2024-03-14 06:30:00 发布

寂寞々先生

最新推荐文章于 2024-03-14 06:30:00 发布

阅读量948

点赞数 2

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_43036190/article/details/104231592

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

vue中给我们提供了一种操作DOM的方属性：ref。绑定在DOM元素上的时候，和id差不多，通过（this.$refs来调用）。
下面就是就是我用vue写的全选(反选)功能的一个小案例：

<style>
	  .ch{
            width: 20px;
            height: 20px;
        }
        [v-cloak]{
            display: none;
        }
</style>
<body>
			<--样式-->
    <div id="app" class="box" v-cloak>
        <div class="header">
            <span>全选</span>
            <span>
                <input class="ch" type="checkbox" @change="allclos" ref="all" value="checked">
            </span>
        </div>
        <div class="main">
            <div class="content">
                <div class="cont">
                    <ul>
                        <li v-for="(item,key) in list">
                            <p>
                                <span>
                                    <input class="ch" type="checkbox" @change="toll" ref="a">
                                </span>
                                <span>{{item.name}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>``

```javascript
	<script src="./vue.js"></script>//在这里一定要记得引入vue.js
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:[{name:'iphone'},{name:'HUAWEL'},{name:'vivo'},{name:'OPPO'},{name:'小米'},{name:'魅族'},{name:'联想电脑'},{name:'宏碁电脑'}]
        },
        methods: {
            allclos(e){
           		//在控制台会输出所有带ref="a"的标签
                console.log(this.$refs.a);
                this.$refs.a.map(element => {
                    element.checked = e.target.checked
                })
            },
            toll(){
                this.$refs.a;
                let n = 0;
                this.$refs.a.map(item => {
                    if(item.checked){
                        n++
                    }
                    if(n==this.$refs.a.length){
                        this.$refs.all.checked = true;
                    }else{
                        this.$refs.all.checked = false;
                    }
                })
            }
        },
    });

 第一次写博客，给大家分享一个小案例，如果有什么不足的地方，希望广大博友，提出宝贵的意见。

寂寞々先生

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中使用ref属性进行全选反选功能的实现

vue中使用ref属性进行全选反选功能的实现vue中给我们提供了一种操作DOM的方属性：ref。绑定在DOM元素上的时候，和id差不多，通过（this.$refs来调用）。下面就是就是我用vue写的全选(反选)功能的一个小案例：<style> .ch{ width: 20px; height: 20px; }...
复制链接

扫一扫