日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

计算属性computed的使用

發布時間:2023/12/10 编程问答 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 计算属性computed的使用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果圖

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script type="text/javascript" src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><!-- 分析: --><!-- 1. 我們要監聽到 文本框數據的改變,這樣才能知道 什么時候去拼接 出一個 fullname --><!-- 2. 如何監聽到 文本框的數據改變呢??? --><input type="text" v-model="firstname" />+<input type="text" v-model="middlename" />+<input type="text" v-model="lastname" />=<!-- 一打開瀏覽器就會有第一次引用 調用computed計算屬性 把結果緩存起來 --><input type="text" v-model="fullname" /><!-- 頁面中重復引用直接從緩存中獲取第一次引用的結果 不會重新調用conputed中計算屬性function求值 --><p>{{ fullname }}</p><p>{{ fullname }}</p><p>{{ fullname }}</p></div><script type="text/javascript">// 創建 Vue實例,得到 ViewModelvar vm = new Vue({el: "#app",data: {firstname: "",middlename: "",lastname: ""},methods: {},computed: {// 自定義一些計算屬性,只限制當前vm實例控制區域使用// 在 computed 中,可以定義一些 屬性,這些屬性,叫做 【計算屬性】, 計算屬性的,本質,// 就是 一個方法,只不過,我們在使用 這些計算屬性的時候,是把 它們的 名稱,直接當作 屬性來使用的;// 并不會把 計算屬性,當作方法去調用;// 注意1: 計算屬性,在引用的時候,一定不要加 () 去調用,直接把它 當作 普通 屬性去使用就好了;// 注意2: 只要 計算屬性,這個 function 內部,所用到的 任何 data 中的數據發生了變化,就會 立即重新計算 這個 計算屬性的值// 注意3: 計算屬性的求值結果,會被緩存起來,方便下次直接使用; 頁面中只在第一次引用時調用這里function 結果被緩存起來// 從第二次開始頁面上所有引用全部從緩存中獲取 不會再重新調用這里的function// 如果 計算屬性方法中,所依賴的任何數據,都沒有發生過變化,則,不會重新對 計算屬性求值;fullname: function() {// 類似與對象的訪問器get, 最終映射為屬性名為健:return結果為值// 頁面上引用了一次 第一次來獲取fullname值 必然調用一下function 返回結果// 頁面第二次引用 沒修改數據時 不會重新調用計算屬性求值console.log("ok"); // 只執行一次return this.firstname + "-" + this.middlename + "-" + this.lastname;// return "hello word";}}});// var obj = {// firstname: "xu",// lastname: "xingfeng",// get fullname() {// return this.firstname + this.lastname;// },// set fullname(value) {// this.firstname = value;// }// };// console.log(obj.fullname);</script></body> </html> 創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的计算属性computed的使用的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。