Vue.js v-model

Posted on Edited on In Views: Disqus:

 

一個簡單應用 v-model 的範例如下

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <form id="myForm">
        <label>{{message}}</label>
        <br>
        <input type="text" v-model="message">
    </form>

    <script>
        var vm = new Vue({
            el: '#myForm',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>

</body>

</html>

說明：

1、v-model 是專門用在表單輸入連動。

2、v-bind 是單向綁定，只能在 render 時，將所綁定的 vue data 資料提取出來；

而 v-model 是雙向綁定，不只是擁有 v-bind 的特性，還具備輸入變動時，也會影響 vue data 資料的提取。