實例：逆轉字符串

<div id="app1">
    <p>{{mess1}}</p>
    <button v-on:click="reverseMessage">逆轉消息</button>
</div>

new Vue({
    el: "#app1",
    data: {
        mess1: "這是一條消息"
    },
    methods: {
        reverseMessage: function(){
            this.mess1 = this
 
.mess1.split("").reverse().join("");
        }
    }
});

reverseMessage()中，我們更新了應用的狀態，但沒有碰DOM。因為所有的DOM操作都由Vue來完成（我猜也就是數據綁定）

將上面的代碼稍作修改，加入一個input，使用v-model將數據雙向綁定

<div id="app1">
    <p>{{mess1}}</p>
    <input v-model="mess1">
    <button v-on:click="reverseMessage
 
">逆轉消息</button>
</div>

當改變輸入框中的值時，mess1的值改變，<p>的值也會改變。

那麽，雙向數據綁定的含義就是：根據用戶的輸入改變數據層，再從數據層返回數據到view層。

當然，這其中任意一個過程都是動態的。所謂“綁定”，牽一發而動全身。

處理用戶輸入