vue achieve a simple calculator example code pages

effect:

code show as below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="num1" />
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" v-model="num2"  />
            <button @click="getResult" >=</button>
            <input type="text" v-model="res" />
            
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    num1:0,
                    num2:0,
                    opt:'+',
                    res:0
                },
                Methods: { 
                    the getResult () { 
                        the console.log ( the this .opt)
                         var STR =  ' Number The (this.num1) ' + the this .opt + ' Number The (this.num2) ' 
//                         the eval function can be performed as the parameter code to perform 
                        the this .res = the eval (STR) 
                    } 
                } 
            }) 
        </ Script > 
    </ body > 
</ HTML >

 

Guess you like

Origin www.cnblogs.com/Mishell/p/12243355.html