注：例項環境 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>

 

重新整理瀏覽器