v-model实现简单计算器

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calculate">
    <input type="text" v-model="result">

</div>


</body>
<script>
    var vm = new Vue({
       el: '#app',
       data: {
           n1: '',
           n2: '',
           result: '',
           opt: '+'
       },
       methods: {
           calculate() {
               // eval()函数一般不建议使用
               var calcStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
               this.result = eval(calcStr);
           }
       }
    });
</script>
</html>
发布了62 篇原创文章 · 获赞 0 · 访问量 1247

猜你喜欢

转载自blog.csdn.net/weixin_45616246/article/details/105334318