您的位置：首页 > Web前端 > Vue.js

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

2020-03-26 07:29 816 查看

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;
}
})
}
},
});
第一次写博客，给大家分享一个小案例，如果有什么不足的地方，希望广大博友，提出宝贵的意见。
  • 点赞
  • 收藏
  • 分享
  • 文章举报
寂寞々先生 发布了5 篇原创文章 · 获赞 0 · 访问量 124 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航