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

1.v-for

for loop: v-for = "item in list" for each item in a list of similar for in loop

<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: [ ' first lesson ' , ' content of the second course ' , ' content lesson 3 ' ] 
           } 
       }) 
   </ Script > 
</ body >

2.v-on

The element binding events

<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>
       #app'
           el:Vue ({new=appwas ',
           data: {
               list: []
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

3. in model

And the data elements in the data instance Vue bidirectional binding.

Verify the following:

1) input box to enter 123333, can be obtained in the same data in the Input box value inputValue

2) changing the console inputValue value data, input box can get the same value:

Summary: Data and data elements Vue examples of two-way data binding.

<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>
       
           electricity:new=appwas Vue ({'#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert(this.inputValue)
            }
           }
       })
   </script>
</body>

The initial list is empty, input box to enter the content, click the button button to generate li labels, add data to the list in

By adding value to the input data which is written, and then due to the two-way binding, output data values in the list, when the data changes, the page will change.

<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>
       Vue ({new=appwas 
           electricity:'#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
            }
           }
       })
   </script>
</body>

After submitting the input box empty

<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>
       Vue ({new=appwas 
           electricity:'#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
               this.inputValue = ''
            }
           }
       })
   </script>
</body>

MVVM pattern, does not operate dom, only by modifying the data page is changed.

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

Guess you like