vue.js计算器,vue计算方法

　　本文主要详细介绍了vue的简单计算器功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现简单计算器功能的具体代码，供大家参考。具体内容如下

　　实现功能：对两个输入框中的值进行加减乘除。

　　用到的知识点：

　　1.1.v模型数据的双向绑定

　　2.number转换成一个数字。

　　3.@click点击事件

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　标题/标题

　　//选择您自己的vue位置

　　脚本src=./js/vue . js type= text/JavaScript charset= utf-8 /script

　　/头

　　身体

　　div id=box

　　！-将第一个值转换为数字-

　　输入类型=数字 v-模型.数字=数字1/

　　select v-model=str

　　选项值=“”/选项

　　选项值=--/选项

　　选项值= * * /option

　　选项值=///选项

　　/选择

　　输入类型= number v-model . number= num2 /

　　！-单击等号执行cal函数的内容-

　　按钮类型=button @click=calc=/button

　　！-输出结果-

　　输入类型=text/v-model=num3

　　/div

　　/body

　　脚本类型=文本/javascript

　　var vm=new Vue({

　　el:#box ，

　　数据：{

　　//初始输入框中的值

　　num1:0，

　　num2:0，

　　num3:0，

　　字符串：“”

　　},

　　方法：{

　　calc(){

　　if(this.str== ){

　　this.num3=this.num1 this.num2

　　}else if(this.str==-){

　　this.num3=this.num1-this.num2

　　}else if(this.str==*){

　　这个. num 3=这个. num 1 *这个. num2

　　}else if(this.str==/){

　　这个. num 3=这个. num 1/这个. num2

　　}

　　}

　　}

　　})

　　/脚本

　　/html

　　结果：

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。