通过some every过滤数据通过参数-全选鼠标放上去字体和黑点变蓝色!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitletitleheadbodydiv id=app button 所有button button男button button女button hr ul li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="gender='all'">所有</button>
<button @click="gender='男'">男</button>
<button @click="gender='女'">女</button>
<pre><code><hr>
<ul>
<li v-for="value in filteredUsers">
<input type="checkbox" v-model="value.checked" />
{{value.username}}
</li>
</ul>
<hr>
<input type="checkbox" v-model="allChecked" /> 全选
</code></pre>
</div>
<script src="./vue.js"></script>
<script>
let users = [
{id: 1, username: '张三', gender: '男', checked: false},
{id: 2, username: '李四', gender: '男', checked: false},
{id: 3, username: '王五', gender: '男', checked: false},
{id: 4, username: '小红', gender: '男', checked: false},
{id: 5, username: '小兰', gender: '女', checked: false},
{id: 6, username: '小绿', gender: '女', checked: false}
];
let app = new Vue({
el: '#app',
data: {
//记录存储 用户点击的时候 是哪一个性别
gender: 'all',
users:users,
allChecked: false
},
methods:{
},
computed:{
filteredUsers: function(){
if(this.gender === 'all'){
return this.users;
}else{
return this.users.filter(function(item){
return item.gender === this.gender;
},this);
}
}
}
});
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/cQMq 著作权归作者所有。请勿转载和采集!