vue2 computed set與get函數


大家都知道computed簡單的使用方法,這兒只分享一下setter和getter用法:

setter:設置值時觸發。

getter:獲取值時觸發,與setter是沒有必然聯系的。

<template >
  <div>
    <button @click='fn'>設置</button> //點擊后fn函數執行。
    <button @click='fn1'>獲取</button> //點擊fn1函數執行。
  </div>
</template>   
<script>
  export default {
    methods:{
      fn(){
      this.msg1=5  //msg1設置值
      },
      fn1(){     
        console.log(this.msg1)//msg1獲取值  上面雖然設置了5,但是這兒是返回6,get函數返回值是6,跟set是沒有必然關系的。
      }
    },
    computed:{
      msg1:{
        set(){  
          console.log('我被設置了')   //msg1設置值時此處觸發 
        },
        get(){
          console.log('我被調用了') //msg1獲取值時觸發
          return 6         //這兒返回值將是msg1的值。
        }
      }
    }
  }
</script>
computed一般用法是改變data里面的值,作為自己的值。
歡迎大家指正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM