使用Vue实现加减乘除的简单计算

目录：

一.实现过程

二.项目源代码

使用工具：HBuilderX 

                  Vue.js插件

---

一.实现过程：

1.在HBuilderX的head标签中插入Vue,js

<script type="text/javascript" src="js/vue.js"></script>

2. html构造页面:

placeholder用来描述输入字段预期值的简短的提示信息

v-model 用来绑定获取到每一个方框以及下拉菜单里的数值

<div id="app">
        <input type="text" placeholder="输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
        结果是:{
  {res}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
        结果是:{
  {res1}} <br>
        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
        结果是:{
  {res2}}
    </div>

3.定义组件:

const vm = new Vue({
            el: "#app",
            data: {