开发TodoList(v-model,v-for,v-on)

1.v-for

 for循环:v-for="item in list"中的item 为list中的每一项,类似for in 循环

<body>
   <div id="app">
       <input type="text"/>
       <button>提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: ['第一课的内容', '第二课的内容','第三课的内容']
           }
       })
   </script>
</body>

开发TodoList(v-model,v-for,v-on)

 

 

 2.v-on

为元素绑定事件

<body>
   <div id="app">
       <input type="text"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: []
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

开发TodoList(v-model,v-for,v-on)

 

 

 3.v-model

Vue实例中data中的数据与元素的数据实现双向绑定。

验证如下:

1)input框输入123333,可以得到在data中的inputValue与Input框中相同的值

开发TodoList(v-model,v-for,v-on)开发TodoList(v-model,v-for,v-on)

 

 

 2)控制台改变data中inputValue值,可以得到input框中相同的值:

 开发TodoList(v-model,v-for,v-on)

 

 

 开发TodoList(v-model,v-for,v-on)

总结:Vue实例中data中的数据与元素的数据实现双向绑定。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert(this.inputValue)
            }
           }
       })
   </script>
</body>

初始list为空,input框输入内容,点击button按钮,生成li标签,往list里添数据

通过往data里面加入input写入的值,再由于双向绑定,输出data里的list值,当data发生变化,页面就会变化。

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
            }
           }
       })
   </script>
</body>

提交之后把input框清空

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>
 
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
               this.inputValue = ''
            }
           }
       })
   </script>
</body>

MVVM模式,不操作dom,只通过修改数据来改变页面。

上一篇:react hook的todolist


下一篇:Vue——TodoList组件拆分