请实现一个简单的网页计算器（vue)

练习一下父组件向子组件传值，计算部分用eval方法实现。

运行截图如下：

 话不多说，上代码。

页面结构：

<div id="app">
        <my-parent></my-parent>
</div>

组件模板：

    <template id='parent'>       
        <div style="margin-top: 20px">
            <input type="radio" id="1" value=1 v-model="radio3"> 加法
            <input type="radio" id="2" value=2 v-model="radio3"> 减法
            <input type="radio" id="3" value=3 v-model="radio3"> 乘法
            <input type="radio" id="4" value=4 v-model="radio3"> 除法
            <my-child v-bind:cal='radio3'></my-child>
        </div>
    </template>
    
    <template id='child'>
          <div>
            <b>数据1：</b>
            <input type="number" v-model="num1">
            <br>
            <b>数据2：</b>
            <input type="number" v-model="num2">
            <br>
            <button @click='jisuan'>计算</button>
            <br>
            <h1>结果：{{te}}</h1>
          </div>       
    </template>

js代码：

    <script>
        Vue.component('myParent',{
            template:'#parent',
            data(){
                return {
                    radio3:'1'
                }
            }
        })
        Vue.component('myChild',{
            template:'#child',
            props:['cal'],
            data(){
                return {
                    te:'',
                    num1:0,                  
                    num2:0
                }
            },
            methods:{
                jisuan(){
                    var num=this.$props.cal;
                    if(num==1)
                    this.te=eval(this.num1+'+'+this.num2);
                    if(num==2)
                    this.te=eval(this.num1+'-'+this.num2);
                    if(num==3)
                    this.te=eval(this.num1+'*'+this.num2);
                    if(num==4)
                    {
                        this.te=(this.num2==0?"除数不能0":eval(this.num1+'/'+this.num2));
                        console.log(this.te)
                    }
                    
                }
            }
        })
        var vm = new Vue({
        el:"#app",
        data:{
            
        }
    })
    </script>

谁还没有点初学者的艰难岁月呢？

We only need to be on ourselves own admantly.