本文實例講述了vue計算屬性computed的使用方法。分享給大家供大家參考,具體如下:
computed:{ b:function(){ //默認調用get return 值 }}
computed:{ b:{ get: set: }}
* computed里面可以放置一些業務邏輯代碼,一定記得return
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.49028c.com vue計算屬性computed</title> <style> </style> <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script></head><body> <div id="box"> a => {{a}} <br> b => {} </div> <script> var vm=new Vue({ el:'#box', data:{ a:1 }, computed:{ b:{ //業務邏輯代碼,b的值完全取決于return回來的值 get:function(){ return this.a+2;//默認調用get }, set:function(val){ this.a=val; } } } }); document.onclick=function(){ vm.b=10;//相當于set函數傳入val=10 }; </script></body></html>
運行結果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答