iapp论坛源码,长沙网站优化排名,免费个人域名邮箱,岱山县建设局网站在这个案例中#xff0c;我们使用v-model分别双向绑定了n1、n2操作数#xff0c;op操作选项和result计算结果#xff0c;同时用绑定了等号按钮事件。 由于是双向绑定#xff0c;当input和select通过外部输入内容时#xff0c;vm内部的数值也会改变#xff0c;所以calcula… 在这个案例中我们使用v-model分别双向绑定了n1、n2操作数op操作选项和result计算结果同时用绑定了等号按钮事件。 由于是双向绑定当input和select通过外部输入内容时vm内部的数值也会改变所以calculate只计算内部这些变量就可以得到正确的结果。
!DOCTYPE html
html langenheadmeta charsetUTF-8titleVueBaseCode/titlescript src./lib/vue.js/script
/headbodydiv idappinput typetext v-modeln1select v-modelopoption value/optionoption value--/optionoption value**/optionoption value///option/selectinput typetext v-modeln2input typebutton value clickcalculateinput typetext v-modelresult/divscriptvar vm new Vue({el: #app,data: {n1: 0,n2: 0,op: ,result: 0},methods: {calculate() {switch (this.op) {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
/body/html 其实这里calculate方法也可以简写一下
calculate() {this.result eval(this.n1 this.op this.n2);
} 附eval()函数接受一个字符串作为参数并将这个字符串作为JavaScript代码来执行可以用于用户动态输入执行代码或用于动态生成的代码段的执行其执行的代码会在当前作用域中运行这意味着它可以访问和修改当前作用域中的变量其问题主要包含三个方面1、又代码注入风险。2、性能差一些。3、可读性和维护性差一些。
