vue_计算器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
</head>
<body>
    <div id="app">
        <!-- 第一个输入框 -->
        <input type="text" size="2" v-model="n1"/>
        <!-- + - * / 四个运算符 -->
        <select v-model="opt">
            <option v-for="item in options" :value="item">{{item}}</option>
        </select>
        <!-- 第二个输入框 -->
        <input type="text" size="2" v-model="n2"/>
        <!-- = 按钮 -->
        <input type="button" value="=" @click="btn"/>
        <!-- 结果 -->
        <input type="text" v-model="result" size="2"/>
    </div>

</body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--2、创建vue实例（new对象）-->
    <script type="text/javascript">
        var vm = new Vue({
           el:'#app',
           data:{
                n1:'',
                options:["+","-","*","/"],
                opt:"",
                n1:"",
                n2:"",
                result:""
           },
           methods:{
                btn(){
                    switch(this.opt){
                        case "+":
                            this.result=parseInt(this.n1)+parseInt(this.n2);
                            break;
                        case "-":
                            this.result=parseInt(this.n1)-parseInt(this.n2);
                            break;
                        case "*":
                            this.result=parseInt(this.n1)*parseInt(this.n2);
                            break;
                        case "/":
                            this.result=parseInt(this.n1)/parseInt(this.n2);
                            break;
                            
                    }
                }
           }
        })
    </script>
</html>

如图所示：

 

 

 

 

V-bind 绑定指令

<input type="button" value="按钮" v-bind:title="mytitle+123" />
简写
<input type="button" value="按钮" :title="mytitle+123" />

V-on 用于绑定事件

点击事件

 

鼠标移入事件：

v-on:mouseover='show' 
可简写为：
@mouseover='show'

总结：

V-text v-html 显示文本
V-clock {{ gone }}：用于防止差值运算显示

V-bind 属性绑定机制 :
V-on 事件绑定机制 @

 

 

posted @ 2021-05-18 10:43  Hhhr  阅读(72)  评论(0)  编辑  收藏  举报