Vue实现加减乘除的计算

1.引入vue.js文件

1 先引入 <script src="vue.js"></script>头部文件

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

2.用HTML创建界面

input接收输入的值，v-model 用来绑定每一个方框的数值

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.实例化vue对象

        var vm = new Vue({
            el: "#app",
            data: {
                num1:"",
                num2:"",