Vue.js 使用 some every 过滤数据并实现全选功能

<div id="app">
    <button @click="gender='all'">所有</button>
    <button @click="gender='男'">男</button>
    <button @click="gender='女'">女</button>
<pre><code>&lt;hr&gt;

&lt;ul&gt;
    &lt;li v-for=&quot;value in filteredUsers&quot;&gt;
        &lt;input type=&quot;checkbox&quot; v-model=&quot;value.checked&quot; /&gt;
       {{value.username}}
    &lt;/li&gt;
&lt;/ul&gt;

&lt;hr&gt;
&lt;input type=&quot;checkbox&quot; v-model=&quot;allChecked&quot; /&gt; 全选
</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>