Vue achieved using a simple calculator

Today learned knowledge Vue, there is a distinct feeling: Before writing a html page, you have to re-login page after each data update, refresh. Vue and the data may be input by the user directly to the back-end code directly.

1. Before learning Preparation: Download the appropriate package

2.idea configure: Download the Vue plug-in

3. Code:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns: xmlns: xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!- <! -->display

v-model before and after the data can be synchronized. 
-> 
< H2 > employed: V-Model </ H2 > 
< div ID = "App" > 

    < P > 
        Unit: < INPUT type = "text" V-Model: value = ". Price" > 
    </ P > 

    < P > 
        number: < INPUT type = "text" V-Model: value = "COUNT" > 
    </ P > 

    < P > 
        Total: <="text" v-model:value="total">
        <button v-on:click="cal()">计算</button>
    </p>

    <hr>

    <p>

        <h2>一个简易计算器！</h2>

    操作数1：<input type="text" v-model:value="op1">
    <select v-model:value="opr">

        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>

    </select>

    操作数2：<input type="text" v-model:value="op2">

   =

    结果：<input type="text" :value="res">
    <button @click = "CAL2 ()" > calculate </ the Button > 
    </ the p- > 
    <-!   v-the bind can be written as:   -> 
    ! <-   v-ON can be written as @    -> 

</ div > 

<! - the introduction of packet resources -> 
< Script the src = "../ lib / vue.js" > </ Script > 

< Script > 
    // declare a target Vue 
    var VM = new new Vue ({ 
        EL: " #app " ,    // bind frontend ID display 
        data:       {       //数据
            price:"12",
            count:"1",
            total:"0",

            op1:"1",
            opr:"+",
            op2:"1",
            res:"0"
        },
        methods:{    //方法
            cal(){
                this.total=this.price*this.count;
            },

            cal22(){
                var flag=this.opr;
                switch (flag) {
                    case '+':
                        this.res=parseInt("this.op1")+parseInt("this.op1");
                        break;
                    case '-':
                        this.res=parseInt("this.op1")-parseInt("this.op1");
                        break;
                    case '*':
                        this.res=parseInt("this.op1")*parseInt("this.op1");
                        break;
                    case '/':
                        this.res=parseInt("this.op1")/parseInt("this.op1");
                        break;
                }
            },

            cal2(){
                this.res=eval("parseInt(this.op1)"+this.opr+"parseInt(this.op2)");
            }
        }
    })
</script>

</body>
</html>

Fig 4. Effects:

Summary: direct digital input of the page, and can dynamically display the results. (No refresh)

The best learning paths: official website ~ ~ ~

eg: Vue self official website: https: //cn.vuejs.org/v2/guide/

Vue achieved using a simple calculator

Guess you like