VUE 之 JS指令

    <table border="1">
        <thead>
            <tr>
                <th>学科</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>python</td>
                <td>
                    <input type="text" v-model.number="python">      # 因为input 框输入进来的是字符串，所以在v-model.number就可以将输入进来的值转换成数字
                </td>
            </tr>
            <tr>
                 <td>go</td>
                <td>
                    <input type="text" v-model.number.lazy="go">      # v-model 是用于双向数据绑定的，input框中有变化，后端跟着变化。如果加了lazy之后，只有当失去焦点的时候才会改变
                </td>
            </tr>
        <tr>
            <td>总成绩</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
</div>
<script>
    new Vue({
        el:"#he",
        data:{
            python:100,
            go:80
        },
        computed:{                   # computed 是用来计算的
            sumScore:function () {
                return this.python+this.go
            }
        },
        watch:{                    # watch 是用来监听data中的数据发生变化的
            python:function () {
                alert(this.python)
            }
        }
    })