commedite

Calculate a property, the first value does not need parentheses, when a property is used, it will have a cache based on the dependency, dependency invariant commedite value will not be evaluated

Vue.config.productionTip = false; let id = 0; const createUser = (name, gender) => { id += 1; return { id, name, gender }; }; new Vue({ data() { return { users: [createUser (" all ", "male"), createUser (" yuan yuan ", "female"), createUser (" small new ", "male"), createUser (" little kwai ", "female")], gender: ""}; }, computed: {displayUsers: {const hash = {mail: "male ", nv:" female "}; if (this.gender === "") { return this.users; } else if (this.gender === "mail" || this.gender === "nv") { return this.users.filter((u) => u.gender === hash[this.gender]); } else {throw new Error("gender Error "); } } }, methods: { shaoAll() { this.gender = ""; }, shaoMan() { this.gender = "mail"; }, shaoNv() { this.gender = "nv"; }}, // How to add event handlers to three buttons // <div> <div> < button@click ="gender =" "> All </ button@click ="gender = 'mail'"> male </ button@click ="gender = 'mail'" = 'nv' @ click = "gender" > women < / button > < / div > < ul > < li v - for = "(u, index) in displayUsers" : the key = "index" > {{u.n ame}} - {{u.gender}} </li> </ul> </div> ` }).$mount("#app");Copy the code

wacth

Listening to the

There are two options for listening

1. The default false immedite | | true, represent the rendering for the first time whether perform this function

  1. Deep default false | | true, if listening to an object, whether to see the options in the object

  2. Don’t use arrow functions

Vue.config.productionTip = false; new Vue({ data: { n: 0, obj: { a: "a", b: "b" } }, template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a: 'a', b: 'b'} "> object obj = new < / button > < / div > `, watch: {n () {the console. The log (changed" n "); }, obj: {handler() {console.log("obj changed "); }, deep: true}, "obj. A" : the function () {the console. The log (" obj. A changed "); } } }).$mount("#app");Copy the code