Vue數據綁定隱藏的神坑....

時間 2019-12-11

標籤 vue 數據綁定隱藏简体版

原文原文鏈接

今天被Vue的一個坑給折磨了一天，終於發現是什麼問題，咱們先來模擬一個場景：
代碼以下：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model='sendJson.name'>
        <button @click='showName'>打印輸入框的值</button>
    </div>
    <script type="text/javascript" src='./vue.min.js'></script>
    <script type="text/javascript">
    new Vue({
        el:'#app',
        data(){
            return{
                sendJson:{}
            }
        },
        methods:{
            showName(){
                console.log(this.sendJson.name)
            }
        }
    });
    </script>
</body>
</html>

咱們進頁面就點按鈕，你猜會輸出什麼？html

是undefined，不算奇怪，你什麼都沒輸入，固然是undefined了。vue