1. 程式人生 > >vue中v-model資料雙向繫結

vue中v-model資料雙向繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app">
        <p>{{ msg }}</p>
        <input type="text" style="width: 200px;"  v-model="msg">
    </div>
<script>
    // 建立一個vue例項
    var vm=new Vue({
        el:'#app',  // 繫結id為appid容器
        data:{
            msg:'啊啊啊啊啊啊啊啊------'
        },
        methods:{


        }
    })
</script>
</body>
</html>

通過修改表單中的資料,可以動態的改變頁面上的資料。