06.VUE學習之非常實用的計算屬性computed實例
阿新 • • 發佈：2019-01-05
app alt fun javascrip ted scrip doc href div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script type="text/javascript" src="../js/vue.js"></script> --> </head> <body> <div id="vue"> <input type="text" v-model="n1">+ <input type="text" v-model="n2">= <input type="text" v-model="sum"> </div> </body> <script type="text/javascript"> var app=new Vue({ el:‘#vue‘, computed:{ // 寫法一: sum:function(){ //*1 是把字符串轉為數字型 用this會從data裏找變量 return this.n1*1+this.n2*1; } // 寫法二: // sum(){ // return this.n1*1+this.n2*1 // } }, data:{ n1:0, n2:0, } }); </script> </html>
效果:
06.VUE學習之非常實用的計算屬性computed實例