v-for: Generate a list structure based on data, and it is responsive, so you can easily manipulate the list structure.
As for what kind of list it is, it depends on where your command is used. The generation of the list depends on the data, so define the data first.
It combines many types, arrays, objects, iterators, and strings. Arrays are most commonly used. Arrays are used here for demonstration.
There are multiple li tags here, and the v-for command is used here to generate multiple li. If there is content in the li, then each generated tag will include the content.
The function of the v-for command is to copy the tag as the template and the internal content according to the number of cycles.
The value of item can be used, and the value of item can be combined with other instructions, such as using v-bind and v-on instructions.
In addition to each item of data in the array, the index page of the array is also commonly used.
Both item and index can modify their names.
If each item of the array is not a number, but an object or other complex type, then item represents the object, and the . syntax is required to obtain the internal value. If dot syntax is not used, the entire object will be rendered.
v-for also has a feature. For example, if the length of the array changes, such as adding or deleting, the generated list will also change.
It can be seen that the v-for instruction can be combined with the v-bind instruction.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<ul type="circle">
<li v-for="(item,index) in arr">
number:{
{ item }} index:{
{ index+1 }}
</li>
<h2 v-for="item in objarr" v-bind:title="item.name">
{
{ item }}
</h2>
<h1 v-for="item in objarr">
{
{ item.name }}
</h1>
</ul>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
arr:[1,2,3,4],
objarr:[
{
name: "lucas",
id : 1
},
{
name: "jerry",
id: 2
}
]
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>