数据双向绑定

---

一、数据双向绑定的原理是什么？

二、使用步骤

1.引入库

代码如下（示例）：

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

2.案例

代码如下（示例）：

	<!-- 静态 -->
	<div id='app'>
        <button @click="getVal">getVal</button>

        <input type="text" v-model="firstValue">
        <select name="" id="">
            <option value="">+</option>
        </select>
        <input type="text" v-model="endValue">
        <button @click="add">=</button>
        <input type="text" v-model="value">
    </div>

	<!-- vue实现 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstValue: '',
                endValue: "",
                value: ''
            },
            methods: {
                getVal() {
                    console.log(this.value);
                },
                add() {
                    this.value = Number(this.firstValue) + Number(this.endValue)
                }
            }
        })
    </script>