Tell me about Vue.js's v-for.

V-for words, compared to the traditional jquery $.each or for loop to be more concise and clear,

In jquery, for example, I want to iterate through the data, usually in the following ways:

$.each (Apps, function (I, app) {rows = rows + '<TR>'; rows = rows + '<TDclass= "Info">' +app.rolename+ '</TD>'; rows = rows + '<TDclass= "Info">' +app.roletype+ '</TD>'; rows = rows + '<TDclass= "Info">' +app.createdate+ '</TD>'; rows = rows + '<TDclass= "Info"><inputtype= "button"value= "Edit"onclick= "Editrole (' +app.rolecode+ ')"/>&nbsp;<inputtype= "button"onclick= "Deleteroleinfo (' +app.rolecode+ ')"value= "Delete"/></TD>'; rows = rows + '</TR>'; });

for (var i = 0; i<List. length; i++) {var Allowauth= List[i].allowauth; if (Allowauth==1) {                      Allowauth= "Authorized user, operable password"; }else{Allowauth=""; } Rows= Rows+ ' <tr>'; rows = rows + '<TD>' + List[i].name + '</TD>'; rows = rows + '<TD>' + List[i].mobile + '</TD>'; rows = rows + '<TD>' + List[i].mobile + '</TD>'; rows = rows + '<TD>' + List[i].authorizer + '</TD>'; rows = rows + '<TD>Start time: ' + List[i].authtimestart + '<BR/>End time: ' +list[i].authtimeend+ '</TD>'; rows = rows + '<TD>' + Allowauth + '</TD>'; rows = rows + '<TD><ahref="#"class= "Iconfont icon-icon-test12"onclick= "Editlockmanager (' +list[i].id+ ')"></a></TD>'; rows = rows + '</TR>'; }

The two ways of traversing the data described above are two common ways of jquery.

Instead, vue.js iterates through the data, with the following examples:

JS Code:

var apps = data.resourcetypelist; New Vue ({  el: "#test",  data:  {    Items:apps    }  

Asynchronous interaction that assigns the collection data acquired in the background to the apps, where El's meaning can be attributed to the following:

El

Type: String | HtmlElement | Function

Restriction: Only functions can be in a component definition.

With:

Provides a mount element for an instance. Values can be CSS selectors, or actual HTML elements, or functions that return HTML elements. Note that the element is used only as a mount point. If a template is provided, the element is replaced unless replace is false. Elements can be accessed using VMS. $el.

The function value must be used in vue.extend so that all instances do not share elements.

If this option is specified at initialization time, the instance will immediately enter the compilation process. Otherwise, the VM needs to be called. $mount (), start compiling manually.

Here I am using the CSS selector, using the ID selector.

Foreground HTML code:

Of course, the front-end to use, you have to reference vue.min.js this class library, otherwise it will not achieve the desired effect.

<TableAlign= "Center"ID= "Test">            <TR>                <TD>Scheme name</TD>                <TD><inputtype= "text"ID= "Plan_name"></TD>                            </TR>                            <TR>                            <TD>Resource type</TD>                 <TD>                <SelectID= "TypeName">                    <optionv-for= "Site in items">{{Site.typename}}</option>                </Select>                </TD>            </TR>                    <TR>                <TD>Standard Price</TD>                                <TD>                 <inputtype= "text"ID= "Price"placeholder= "Please enter standard price">                </TD>            </TR>                        <TR>                <TD>Default Scenario</TD>                 <TD>                <inputtype= "Radio"name= "Isdefaultplan"value= "0"checked>is a<inputtype= "Radio"name= "Isdefaultplan"value= "1">No</TD>            </TR>                    <TR>                <TD>State</TD>                                 <TD><inputtype= "Radio"name= "status"value= "0"checked>Open<inputtype= "Radio"name= "status"value= "1">Close</TD>            </TR>            <TR>            </TR>            <TR>                <TD>                <inputtype= "button"onclick= "Addresourceplan ()"value= "Save">                </TD>            </TR>                        </Table>

However, any framework has its limitations, such as the conflict between the framework, resulting in the effect does not come out or error, there are other strange problems, such as today I encountered a very odd problem, I select the drop-down list of data traversal, the data is normally displayed in the foreground, and when I need to pass it into the background, The way it appears:

Some say this is the reason:

Others say this is the reason:

The first one said it was the front end. No unified specified character set Charset=utf-8

Indeed, if you do not specify this, then the entire page will be garbled in Chinese, but unfortunately I did not, because, I created the default interface has been designated Charset=utf-8, so to exclude this reason

The second one says this reason, I'm not sure, so it needs to be verified

This is my search engine to find a more reliable solution, but later I disprove the law, I use the traversal of jquery to try, if the traversal of jquery is the same result, then can only say with the second person's statement may be related, or there are other hidden problems.

Finally I use jquery's $.each to try, found that there is no problem, some may say, perhaps the cache, if it is cached, I personally modified JS with alert test, each time I change the value of the alert has been changed, but still before, Even if I F5, it is still the same, unless the browser cache is cleared, reopened, but that is too time-consuming, for developers to cherish the time like gold Ah! I'll go through the ctrl+f5.

Here is simply the difference between F5 and Ctrl+f5:

Press F5 sometimes some content is not updated, and ctrl+f5 all content is updated.
The specific difference is that F5 usually just refreshes the local cache; Ctrl+f5 can remove the files from the Temporary Internet folder and then download them again from the server, that is, to completely refresh the page.

I think the answer is easy to understand.

Finally replaced with $.each tried over and over again, there really is no previous problem. Is it vue.min.js's sake? But if it is vue.min.js, then why did I use Vue's v-for before why the garbled situation? For example, my marketing center business in the resource display function, is the use of v-for. Is it because of the Chinese and the non-Japanese characters? I can not speculate, because the programming of a practical and rigorous science, such as mathematics from the slightest ambiguity, although I am not good at math, but a characteristic of mathematics, I still like, that is, "right is right, wrong is wrong, there is no perhaps perhaps such a word."

Tell me about Vue.js's v-for.