vue v-model :

v-model :

通过v-model 进行双向绑定 ，将data的数据与input 绑定在一起，呈现在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="first">
       姓氏:<input v-model="firstname"/><br>
       名字:<input v-model="lastname"/>
       <div>{{firstname}}{{lastname}}</div>
  </div>
  <script>
      new  Vue({
        el:"#first",
        data:{
           firstname:'',
           lastname:''
        }

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

　　效果：

 

 

 

 

 

 2018-05-01  23:40:46

posted @ 2018-05-01 23:41  1点  阅读(123)  评论(0)  编辑  收藏  举报