数据双向绑定_编写代码实现双向数据绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_71242735/article/details/130755642

文章介绍了数据双向绑定的概念，通过Object.defineProperty实现数据劫持和监听。示例中展示了如何用Vue.js创建一个简单的计算器，利用v-model绑定输入值和计算结果，用户选择运算符后，点击等于按钮即可得到计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

数据双向绑定
- 简易计算器实现代码

数据双向绑定

1.绑定的是表单控件
2.数据双向绑定原理：数据双向绑定是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者，触发响应的监听回调来渲染视图。

<input type="text" v-model:value="value">

简写

<input type="text" v-model="value">

 data: {
            	value: 123
            }

简易计算器实现代码

html部分

 <!-- 实现功能需要先引入vue.js包 -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <div id="app">
        <!-- 计算器 -->
        <input type="text" v-model="firstValue">
        <select v-model="selected" name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="endValue">
        <button @click="value">=</button>
        <input type="text" v-model="lastValue">
    </div>

js部分

 let vm = new Vue({
        el: '#app',
        data: {
            firstValue: '',
            endValue: '',
            lastValue: '',
            selected: ''
        },
        methods: {
            value() {
                // console.log('111');
                // console.log(this.selected);
                this.lastValue = eval('Number(this.firstValue)' + this.selected + 'Number(this.endValue)')

            },
        },
    })