zoukankan      html  css  js  c++  java
  • Vue 数据双向绑定的误区

    都知道 Vue 的核心是数据的双向绑定:即数据变化,DOM中的显示值即变化;

    但有个例外,

    <template>
        <div>
            <input v-model="form.name" />
            <span>{{form.code}}</span>
            <input v-model="form.old" />
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                form: {
                    name: '张三',
                    code: '0001'
                }
            }
        },
        watch: {
            ['form.name']() {
                console.log(this.form)
            },
            ['form.old']() {
                console.log(this.form)
            }
        },
        mounted() {
            this.form.old = 12
        },
        methods: {
            oldInput(value) {
                this.form.old = value
            }
        }
    }
    </script>

    参数中 form.old是后加的参数,这样的结果就是form.old变化时,是监听不到数据变化的,会导致一些逻辑问题。

    所以在Vue中要实现数据的双向绑定,一定要初始化时,参数一定要存在,否则就会有意想不到的问题

  • 相关阅读:
    冲刺一(5)
    冲刺一(4)
    冲刺一(3)
    构建之法阅读笔记之二
    冲刺一(2)
    冲刺一(1)
    第9周总结
    热词顶会分析
    第8周总结
    构建之法阅读笔记之一
  • 原文地址:https://www.cnblogs.com/sonicit/p/15565750.html
Copyright © 2011-2022 走看看