v-model 数据双向绑定,并制作计算器

最新推荐文章于 2024-05-21 23:21:19 发布

Jocelyn_柠檬

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量232

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2301_81428463/article/details/136939180

版权

v-model 数据双向绑定

原理

通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

vue计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <script src="./vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="first">
        <select v-model="symbol">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="second">
        <button @click="add">=</button>
        <input type="text" v-model="end">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            first:'',
            symbol:'',
            second:'',
            end:''
        },
        methods: {
            add() {
                switch (this.symbol) {
                    case '+':
                        this.end = + this.first  +  + this.second
                        break;
                    case '-':
                        this.end = + this.first  -  + this.second
                        break;
                    case '*':
                        this.end = + this.first  *  + this.second
                        break;
                    case '/':
                        this.end = + this.first  /  + this.second
                        break;
                    default:
                        break;
                }
                
            }
        }
    })
</script>
</html>

Jocelyn_柠檬

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
v-model 数据双向绑定,并制作计算器

通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
复制链接

扫一扫