采用Vue实现一个简单的计算器

今天学习了Vue的相关知识，有一个明显的感受：之前写一个html页面，每次更新数据后就得重新登录页面，进行刷新。而Vue中可以将用户输入的数据直接传到后台的代码中直接使用。

1.学习前准备工作：下载相应的包

2.idea进行配置：下载Vue插件

3.代码：

<!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>

<!--显示-->
<!--
v-model 可以进行前后数据的同步。
-->
<h2>采用： v-model</h2>
<div id="app">

    <p>
        单价：<input type="text" v-model:value="price">
    </p>

    <p>
        数量：<input type="text" v-model:value="count">
    </p>

    <p>
        总计：<input type="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()">计算</button>
    </p>
    <!--  v-bind可以写为  ：  -->
    <!--  v-on可以写为   @   -->

</div>

<!--引入包资源-->
<script src="../lib/vue.js"></script>

<script>
    //声明一个Vue对象
    var vm=new Vue({
        el:"#app",   //绑定前端进行显示的ID
        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>

4.效果图：

总结：在页面中可以直接的进行输入数字，并可以动态的显示结果。（不用进行刷新）

最好的学习路径：官网~~~

eg：Vue自学官网：https://cn.vuejs.org/v2/guide/

采用Vue实现一个简单的计算器

猜你喜欢