<!DOCTYPE html>>
<html>
<head>
<mata charset="UTF-8"/>
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-for指令
1.用于展示列表数据
2.语法：v-for="（item，index） in xxx" := key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for="p in persons" :key="p.id">{
{p.name}} - {
{p.age}}</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{
{k}} - {
{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串</h2>
<ul>
<li v-for="(char, index) of str" :key="index">
{
{char}} - {
{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数</h2>
<ul>
<li v-for="(a,b) of 5">{
{a}} - {
{b}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{
id:'001', name:'张三', age:18},
{
id:'002', name:'李四', age:19},
{
id:'003', name:'王五', age:20},
],
car:{
name:'aodi',
price:'30000'
},
str:'hello'
}
})
</script>
</html>
Vue技术12.1基本列表
猜你喜欢
转载自blog.csdn.net/qq_40713201/article/details/126238339
今日推荐
周排行