美文网首页
2020-02-05

2020-02-05

作者: 我是萌哒哒小羊 | 来源:发表于2020-02-05 14:43 被阅读0次

    计算器

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <div id="app">
                <input type="text" v-model='n1'>
    
                <select v-model='opt'>
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
    
                <input type="text" v-model="n2">
    
                <input type="button" value="=" v-on:click="calculate">
    
                <input type="text" v-model="result">
            </div>
    
            <script type="text/javascript">
                var vm = new Vue({
                    el: '#app',
                    data: {
                        n1: 0,
                        n2: 0,
                        result: 0,
                        opt: '-'
                    },
                    methods: {
                        calculate() {
                            if (this.opt == '+')
                                this.result = this.n1 + this.n2
                            if (this.opt == '-')
                                this.result = this.n1 - this.n2
                            if (this.opt == '*')
                                this.result = this.n1 * this.n2
                            if (this.opt == '/')
                                this.result = this.n1 / this.n2
                        }
                    }
                });
            </script>
        </body>
    </html>
    
    
    

    相关文章

      网友评论

          本文标题:2020-02-05

          本文链接:https://www.haomeiwen.com/subject/majsxhtx.html