4.1计算属性
性别不要用sex用gender
筛选男女代码1
// 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
id += 1;
return { id, name, gender };
};
new Vue({
data() {
return {
users: [
createUser("方方", "男"),
createUser("圆圆", "女"),
createUser("小新", "男"),
createUser("小葵", "女")
],
displayUsers: []
};
},
created() {
this.displayUsers = this.users;
},
methods: {
change(String) {
if (String === "") {
this.displayUsers = this.users;
} else if (String === "male") {
this.displayUsers = this.users.filter(u => u.gender === "男");
} else if (String === "female") {
this.displayUsers = this.users.filter(u => u.gender === "女");
}
}
},
// 如何给三个按钮加事件处理函数
// 思路一：点击之后改 users
// 思路二：使用 computed
template: `
<div>
<div>
<button @click="change('')">全部</button>
<button @click="change('male')">男</button>
<button @click="change('female')">女</button>
</div>
<ul>
<li v-for="u in displayUsers" :key="u.id">
{{u.name}} - {{u.gender}}
</li>
</ul>
</div>
`
}).$mount("#app");
筛选男女代码2, 用计算属性
// 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
id += 1;
return { id, name, gender };
};
new Vue({
data() {
return {
users: [
createUser("方方", "男"),
createUser("圆圆", "女"),
createUser("小新", "男"),
createUser("小葵", "女")
],
gender: ""
};
},
computed: {
displayUsers() {
const hash = {
male: "男",
female: "女"
};
const { users, gender } = this;
if (gender === "") {
return this.users;
} else if (typeof gender === "string") {
return users.filter(u => u.gender === hash[gender]);
} else {
throw new Error("gender 的值意外的值");
}
}
},
methods: {
setGender(string) {
this.gender = string;
}
},
// 如何给三个按钮加事件处理函数
// 思路一：点击之后改 users
// 思路二：使用 computed
template: `
<div>
<div>
<button @click="setGender('')">全部</button>
<button @click="setGender('male')">男</button>
<button @click="setGender('female')">女</button>
</div>
<ul>
<li v-for="u in displayUsers" :key="u.id">
{{u.name}} - {{u.gender}}
</li>
</ul>
</div>
`
}).$mount("#app");
