vue項目中data數據之間互相訪問的實現

Posted on by

如下代碼：

    <div id="vue_det">
        <input type="number" v-model="text">
        <div>{{textAdd}}</div>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                text: 1,
                textAdd:parseInt(this.text) + 1       
            }
        })
    </script>

想實現如下圖所示效果：div標簽裡面的值為input中的值+1計算得出。

上面代碼中的textAdd = parseInt(this.text) + 1，這種寫法肯定訪問不到this.text的值。

如若想訪問data中的值，且textAdd是有text計算得出，想要實現雙向數據綁定，text值變化，textAdd的值動態改變，可以用conputed來實現。代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue的data中數據互相訪問</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <!-- <script src="vue.min.js"></script> -->
</head>
<body>
    <div id="vue_det">
        <input type="number" v-model="text">
        <div>{{textAdd}}</div>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                text: 1,
                // textAdd:this.text+1           
            },
            computed: {
                textAdd: function() {
                    return  (parseInt(this.text) + 1);
                }
            }
        })
    </script>
</body>
</html>

到此這篇關於vue項目中data數據之間互相訪問的實現的文章就介紹到這瞭,更多相關vue data互相訪問內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：