<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 遍历对象的属性,会取出属性名和属性值 --> <!-- 属性名在后,属性值在前 --> <ul> <li v-for="value,propName in user">{{propName}}={{value}}</li> </ul> <!-- 遍历字符串 --> <!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 --> <ul> <li v-for="s,index in str">{{index}}{{s}}</li> </ul> <!-- 遍历指定的次数怎么操作 --> <!-- 左边是次数,右边是下标 --> <ul> <li v-for="(num,index) of counter"> {{num}},{{index}} </li> </ul> <h1>{{msg}}</h1> <!-- 静态列表 --> <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> <!-- 动态列表 --> <ul> <!-- v-for要写在循环项上 --> <li v-for="name in names">{{name}}</li> </ul> <!-- 用in和of效果是一样的 --> <ul> <!-- v-for要写在循环项上 --> <!-- v-for="变量名,下标 in/of 变量" --> <!-- 变量名代表每一个元素 --> <li v-for="name,x of names">{{x}}:{{name}}</li> </ul> <ul> <li v-for="vip,index in vips"> 序列号:{{index}} 会员名:{{vip.username}} id:{{vip.id}} 年龄:{{vip.age}} </li> </ul> <table> <tr> <th>序列号</th> <th>会员名</th> <th>id</th> <th>年龄</th> <th>选择</th> </tr> <tr v-for="vip,index in vips"> <td>{{index}}</td> <td>{{vip.username}}</td> <td>{{vip.id}}</td> <td>{{vip.age}}</td> <td><input type="checkbox"/></td> </tr> </table> </div> <script> const vm = new Vue({ el : "#app", data : { msg : "Hello", names : ["Jack","Rose","James"], vips : [ {username : "Jack",id : 1,age : 20}, {username : "Rose",id : 2,age : 20}, {username : "James",id : 3,age : 20} ], user : { id : "111", name : "Jack", age : 25 }, str : "狂人日记鲁迅", counter : 10 } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历对象的属性,会取出属性名和属性值 -->
<!-- 属性名在后,属性值在前 -->
<ul>
<li v-for="value,propName in user">{{propName}}={{value}}</li>
</ul>
<!-- 遍历字符串 -->
<!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 -->
<ul>
<li v-for="s,index in str">{{index}}{{s}}</li>
</ul>
<!-- 遍历指定的次数怎么操作 -->
<!-- 左边是次数,右边是下标 -->
<ul>
<li v-for="(num,index) of counter">
{{num}},{{index}}
</li>
</ul>
<h1>{{msg}}</h1>
<!-- 静态列表 -->
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!-- 动态列表 -->
<ul>
<!-- v-for要写在循环项上 -->
<li v-for="name in names">{{name}}</li>
</ul>
<!-- 用in和of效果是一样的 -->
<ul>
<!-- v-for要写在循环项上 -->
<!-- v-for="变量名,下标 in/of 变量" -->
<!-- 变量名代表每一个元素 -->
<li v-for="name,x of names">{{x}}:{{name}}</li>
</ul>
<ul>
<li v-for="vip,index in vips">
序列号:{{index}}
会员名:{{vip.username}}
id:{{vip.id}}
年龄:{{vip.age}}
</li>
</ul>
<table>
<tr>
<th>序列号</th>
<th>会员名</th>
<th>id</th>
<th>年龄</th>
<th>选择</th>
</tr>
<tr v-for="vip,index in vips">
<td>{{index}}</td>
<td>{{vip.username}}</td>
<td>{{vip.id}}</td>
<td>{{vip.age}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
names : ["Jack","Rose","James"],
vips : [
{username : "Jack",id : 1,age : 20},
{username : "Rose",id : 2,age : 20},
{username : "James",id : 3,age : 20}
],
user : {
id : "111",
name : "Jack",
age : 25
},
str : "狂人日记鲁迅",
counter : 10
}
});
</script>
</body>
</html>
VUE框架使用v-for遍历指定字符串次数对象和数组------VUE框架
于 2023-11-29 16:04:24 首次发布