序
直接看代码，v-blid的使用，数据类型的转换
示例代码
点击查看代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>avgScore</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> score1:<input type="text" v-model.number="score1" /> <br /> score2:<input type="text" v-model.number="score2" /> <br /> score3:<input type="text" v-model.number="score3" /> <br /> score4:<input type="text" v-model.number="score4" /> <br /> score5:<input type="text" v-model.number="score5" /> <br /> 总分:{{sumScore}} <br /> 平均分数:{{avgScore}} <br/> <input :value="defaultv" /> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ ObjectNum:5, score1:"", score2:"", score3:"", score4:"", score5:"", defaultv:'默认' }, methods:{ }, computed:{ avgScore:function(){ // 准确到小数点后两位 return Math.round(this.sumScore/this.ObjectNum).toFixed(2) }, sumScore:function(){ return this.score1+this.score2+this.score3+this.score4+this.score5 } }, }) </script> </html>
界面效果
知识点
- v-bind属性绑定 在本次代码中的 ：value可以看出他可以直接缩写为 ：属性
- v-model.number 数据类型定义为数字，弱类型真不好用