Vue.js入門學習 -- 計算屬性Computed（ 十一）

appleyk發表於2018-08-17
Vue.js

 

      每天若有時間，便會抽點出來，學點Vue的基礎（因為不想被社會淘汰絕不是因為閒的慌）還是很嗨皮的，聽著歌，對著網上的教程demo，先看一遍，看看自己是否能理解，如果理解不了，在看看demo的演示效果，從演示效果裡面找點蛛絲馬跡，如果還是理解不了，那就只能在本地親自敲一遍demo跑一跑了，其實學習很簡單，花點時間就OK了，其實健身也很簡單，也是花點時間就OK的事，但是，堅持學習和堅持健身很難（這兩件事我都在儘量"堅持"，但是有一件事情我是每天都堅持下來的 == 每天至少一包純奶），廢話不多好，直接上demo：

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 測試例項 - 計算屬性</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label for="usernmae">使用者名稱</label>
    <input type="text" id="username" v-model="message" placeholder="請輸入使用者名稱："/>
    <br>
    <br>
    <label for="rusername">使用者名稱翻轉</label>
    <span>{{reverseMessage}}</span>
    
    <br>
    ---------------------------
    <h1>聯絡我：{{about}}</h1>
  </div>
  <script>
    var a = new Vue({
      el: '#app',
      data: {
        message: "Appleyk",
        name:"CSDN",
        url:"https://blog.csdn.net/appleyk"
      },
      computed:{//computed 效能高於 method（不管值有麼有變化，都要呼叫一次）
          //reverseMessage屬性的getter == 依賴於快取，如果message不變，不會重新計算（渲染）
        reverseMessage:function(){ //預設getter
            return this.message.split("").reverse().join("")
        },
        about:{
            //預設只有getter屬性
            get:function(){
                return this.name+":"+this.url
            },
            //我們也可以新增setter屬性
            set:function(newvalue){
                var values = newvalue.split(':')
                this.name = values[0]
                this.url  = values[values.length-1]        
            }
        }

      }
    })

  </script>
</body>
</html>

 

 

 

編輯器VSCode：

 

 

 

效果1（測試getter屬性）：

 

 

 

效果2（測試setter屬性）：

 

demo說明：

 

 

 

browser中測試：

 

相關文章