vue计算器

最新推荐文章于 2024-02-29 09:16:48 发布

红色波浪号

最新推荐文章于 2024-02-29 09:16:48 发布

阅读量172

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_72815229/article/details/127912976

版权

利用v-model双向绑定

    <div id="app">
        <input type="text" v-model="value1">
        <select v-model="value" name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">
    </div>

 let vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            value3: '',
            value: '+',
        },
        methods: {
            add() {
                if (this.value == '+') {
                    this.value3 = Number(this.value1) + Number(this.value2)
                }
                if (this.value == '-') {
                    this.value3 = Number(this.value1) - Number(this.value2)
                }
                if (this.value == '*') {
                    this.value3 = Number(this.value1) * Number(this.value2)
                }
                if (this.value == '/') {
                    this.value3 = Number(this.value1) / Number(this.value2)
                }
                // console.log(this.value);
            }
        }
    })