注：實例環境 vue cli構建的項目
app.vue
<template> <Example></Example> </template> <script> import Example from './components/Example' export default { name: 'App', components: { Example } } </script> <style> </style> Example.vue
<template> <div> <label>加法:</label> <input type="number" v-model="num1"/><span>+</span><input type="number" v-model="num2"/><span>=</span>{{total}} <hr> <table> <thead> <tr> <td>學科</td> <td>分數</td> </tr> </thead> <tbody> <tr> <td>語文</td> <td><input type="text" v-model.number="chinese"/> </td> </tr> <tr> <td>數學</td> <td><input type="text" v-model.number="math"/></td> </tr> <tr> <td>英語</td> <td><input type="text" v-model.number="english"/></td> </tr> <tr> <td>總分</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> </tbody> </table> </div> </template> <script> export default { name: "Example", data:function () { return { num1:0, num2:0, newListText:'', username:'', age:0, chinese:97, math:90, english:98 } }, computed:{ sum:function () { return parseFloat(this.chinese) + parseFloat(this.math) + parseFloat(this.english); }, average:function () { return Math.round(this.sum / 3) }, total:function () { return parseInt(this.num1) + parseInt(this.num2); } } } </script> <style scoped> </style>
刷新瀏覽器
