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

v-model——雙向資料繫結

注意:

1.v-model雙向繫結,v-bind只能單項繫結

2.v-model只能用在表單元素中

HTML程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
       <div id="app">
           <h3>{{ msg }}</h3>

           <input type="text" v-bind:value="msg" style="width:100%">
           <!--如果忘記寫v-bind則是直接將input賦值為msg,而並沒有繫結事件-->

           <input type="text" v-model="msg" style="width:100%">
       </div>

       <script>
           var vm = new Vue({
               el:'#app',
               data:{
                   msg:'陳小帥是真的帥'
               },
               methods:{}
           });
       </script>
</body>
</html>

效果: