1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算属性</title> </head> <body> <div id="app"> <!--fullName的值需要根据firstName和lastName的值拼接而成--> firstName:<input type="text" v-model="firstName"></input><br> lastName:<input type="text" v-model="lastName"></input><br> fullName:<input type="text" v-model="fullName"></input> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { firstName: "A", lastName: "B" }, computed: { //计算属性的方法会在初始化属性值以及和属性值相关的数据有改变的时候被执行 //当firstName和lastName任何一个有改变时都会重新计算fullName的值 fullName() { return this.firstName + " " + this.lastName; } } }); </script> </body> </html>
2、案例2
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算属性之get和set</title> </head> <body> <div id="app"> <!--双向计算--> <!--fullName的值需要根据firstName和lastName的值拼接而成--> <!--firstName和lastName的值也可根据fullName的值的改变而改变--> firstName:<input type="text" v-model="firstName"></input><br> lastName:<input type="text" v-model="lastName"></input><br> fullName:<input type="text" v-model="fullName"></input><br> <button @click="updateFunc">update fullName value</button> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { firstName: "A", lastName: "B" }, methods: { updateFunc() { /* 1、执行完这行代码会回调对应的set方法，不论这里fullName的值是否和原fullName的值相同 都会回调。 */ this.fullName = "DE KB"; } }, watch: { firstName(newValue, oldValue) { console.log("watch---firstName---" + newValue); }, lastName(newValue, oldValue) { console.log("watch---lastName---" + newValue); } }, computed: { fullName: { /* 1、fullName在初始化和需要获取fullName的值时会调用get方法。 2、与fullName相关联的数据发生改变时也会调用get方法重新计算fullName的值。 3、当firstName和lastName任何一个发生改变的时候都会调用get方法重新计算
fullName的值，不会调用set方法。 */ get() { console.log("fullName---get"); return this.firstName + " " + this.lastName; }, /* 1、value为fullName改变后的值。 2、set方法用于监视fullName的改变。 3、在界面输入框有重新输入fullName的值时会调用set方法(不论输入后的值是否 和输入前的值相同)。 4、firstName有改变或lastName有改变或firstName和lastName都有改变， 这里只会调用一次get方法，而且是执行在firstName和lastName对应的watch方法之后。 5、若firstName和lastName都没有改变，则也不会回调get方法。 */ set(value) { console.log("fullName---set"); //firstName的值有发生改变时才会回调对应的watch方法 this.firstName = value.split(" ")[0]; //lastName的值有发生改变时才会回调对应的watch方法 this.lastName = value.split(" ")[1]; } } } }); </script> </body> </html>
3、案例3
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算属性之缓存</title> </head> <body> <!-- 如下代码get方法只会调用一次，因为有缓存的作用 --> <div id="app"> firstName:<input type="text" v-model="firstName"></input><br> lastName:<input type="text" v-model="lastName"></input><br> fullName:<input type="text" v-model="fullName"></input><br> <p>{{fullName}}</p> <p>{{fullName}}</p> <p>{{fullName}}</p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { firstName: "A", lastName: "B" }, computed: { fullName: { get() { console.log("fullName---get"); return this.firstName + "-" + this.lastName; }, set(value) { console.log("fullName---set"); this.firstName = value.split("-")[0]; this.lastName = value.split("-")[1]; } } } }); </script> </body> </html>