【Vue】6. v-model指令

wowpH發表於2020-10-18
Vue

文章目錄

一、前言

本文通過簡單示例學習v-model指令的使用。

二、示例

1、程式碼

<!DOCTYPE html>
<html>

<head>
    <title>v-model指令</title>
    <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script>
        var app6 = new Vue({
            el: '#app-6',
            data: {
                message: '這是v-model指令的示例，請在輸入框中修改我的內容。
            }
        });
    </script>
</body>

</html>

2、頁面效果

v-model指令

在輸入框中修改文字，第一行的內容會相應改變。說明v-model指令能夠實現資料的雙向繫結，與此不同的是v-bind只能單向繫結（Vue可以傳值給頁面，頁面不能傳值給Vue）。

三、總結

  1. v-bind單向繫結，v-model雙向繫結。

相關文章