<!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 事件绑定机制 @