Vuejslearn---v-for list rendering

Vue.js is a library that builds a data-driven Web interface. Focus on the ViewModel layer of the MVVM pattern, so it's easy to integrate with other libraries or existing projects

The core of Vue.js is a responsive data-binding system that keeps data synchronized with the DOM very simple

As shown in the following table, when we get the data from the backend interface or JSON file using AJAX, we have the N-way to render the data to the page.

1. Use JS for loop to traverse the fill

2.ng of Ng-repeat

Today we use Vue.js's v-for

First, the HTML

<Divclass= "Shop_list_box">     <ul>        <Li><span>Bengbu</span><span>Fengyang Dong Lu</span></Li>        <Li><span>Bengbu</span><span>Fengyang Dong Lu</span></Li>    </ul></Div>

Two

JSON data node

Third, using v-for binding data to the page

Referencing vue.js, the request data succeeds after instantiating a vue. El is bound to that element under the

Notice here when an array of bread has some objects---->{} or [{},{},{}]

function (DAT) {                        var data = dat.cstore           //  console.log (data)                        var  New  Vue ({                ' #example ',                data: {                    items:data                }})        });

View Code

<Divclass= "Shop_list_box">                      <ulID= "Example">                          <Liv-for= "Item of items">                              <span>{{item.city}}</span><span>{{Item.shop}}</span>                          </Li>                                               </ul>                  </Div>

View Code

It's OK to be here.

However, you can also use template v-for

Template v-for similar to V-for

{{item.city}} can also be replaced with v-text= "item.city", the advantage is that the data is not loaded when you do not see the {{}} placeholder

Vuejslearn---v-for list rendering