vue.js - vue 通过methods方式动态绑定数据的问题

问题描述

问 题

下面的代码中， 有两个div;第一个div绑定为data.data_a；第二个div通过methods. getDataB()动态绑定。

现在出现的问题是： data_a 的数据发生改变时， 'getDataB()'也会执行，修改第二个div的data-b值。

请问哪个大神能解释一下。

<template>
    <div>
        <div :data-a="data_a">
            demo show params A
        </div>
        <div :data-b="getDataB()">
            demo show params B
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                data_a: 0,
                datas: [
                    0, 1, 2, 3, 4
                ]
            }
        },
        methods: {
            getDataB () {
                console.log('getDataB() called');
            }
        },
        mounted () {
            setInterval(function () {
                this.data_a = parseInt(Math.floor(Math.random() * 10000000000));
            }.bind(this), 1000);
        }
    }
</script>

解决方案

A值在变化，重新渲染了页面，data-b直接绑定的方法getDataB,每次渲染页面都会引起getDataB的调用

这篇关于vue.js - vue 通过methods方式动态绑定数据的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！