通过v-model进行双向数据绑定
给计算按钮，绑定事件，实现计算逻辑
将计算结果绑定到相应位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <h1>简单计算器</h1> <div> 数值A:<input type="text" v-model.number="a"/> </div> <!-- 利用v-model进行双向数据绑定，利用number修饰符，将文本转化为数值 --> <div> 数值B:<input type="text" v-model.number="b"/> </div> <div> <button type="button" v-on:click="compute">计算</button> </div> <div v-text="result">计算结果为：</div> </div> <script type="text/javascript"> var vm=new Vue( { el:'#app', /*用于告诉vue数据的填充位置，利用id等进行标注*/ data: { a:"", b:"", result:"", }, methods: { compute:function(){ this.result = this.a+this.b // 实现计算逻辑 } } }); </script> </body> </html>