列表渲染
- 指令：
v-for - 语法：
v-for="(item,index) in list" :key="index" :key: 强烈建议使用数据中唯一标识，避免数据乱序后渲染差错问题
数组
- 数据
persons:[
{id:'001',name:'刘德华',age:18},
{id:'002',name:'张学友',age:18},
{id:'003',name:'郭富城',age:18},
{id:'004',name:'黎明',age:18}
]
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.base{
padding: 5px;
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h1>列表渲染</h1>
<div>
<h2>数组</h2>
<ul>
<!-- :key="item.id" :key="index" -->
<li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "Vue 扛把子",
persons:[
{id:'001',name:'刘德华',age:18},
{id:'002',name:'张学友',age:18},
{id:'003',name:'郭富城',age:18},
{id:'004',name:'黎明',age:18}
],
},
methods:{
},
});
</script>
</html>
- 效果
对象
- 数据
girl:{
name:"ALice",
age:28
}
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.base{
padding: 5px;
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h1>列表渲染</h1>
<div>
<h2>数组</h2>
<ul>
<!-- :key="item.id" :key="index" -->
<li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li>
</ul>
<h2>对象</h2>
<ul>
<!-- :key="k" :key="index" -->
<li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "Vue 扛把子",
persons:[
{id:'001',name:'刘德华',age:18},
{id:'002',name:'张学友',age:18},
{id:'003',name:'郭富城',age:18},
{id:'004',name:'黎明',age:18}
],
girl:{
name:"ALice",
age:28
},
},
methods:{
},
});
</script>
</html>
- 效果
字符串
- 数据
str:"vue"
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.base{
padding: 5px;
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h1>列表渲染</h1>
<div>
<h2>数组</h2>
<ul>
<!-- :key="item.id" :key="index" -->
<li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li>
</ul>
<h2>对象</h2>
<ul>
<!-- :key="k" :key="index" -->
<li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li>
</ul>
<h2>字符串</h2>
<ul>
<li v-for="(c,index) in str" :key="index">{{index}}-{{c}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "Vue 扛把子",
persons:[
{id:'001',name:'刘德华',age:18},
{id:'002',name:'张学友',age:18},
{id:'003',name:'郭富城',age:18},
{id:'004',name:'黎明',age:18}
],
girl:{
name:"ALice",
age:28
},
str:"vue"
},
methods:{
},
});
</script>
</html>
- 效果
指定数字
数据
指定数字5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>列表渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.base{
padding: 5px;
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<h1>列表渲染</h1>
<div>
<h2>数组</h2>
<ul>
<!-- :key="item.id" :key="index" -->
<li v-for="(item,index) in persons" :key="item.id">{{index}}-{{item.id}}-{{item.name}}</li>
</ul>
<h2>对象</h2>
<ul>
<!-- :key="k" :key="index" -->
<li v-for="(v,k,index) in girl" :key="index">{{index}}-{{k}}-{{v}}</li>
</ul>
<h2>字符串</h2>
<ul>
<li v-for="(c,index) in str" :key="index">{{index}}-{{c}}</li>
</ul>
<h2>数字</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: "Vue 扛把子",
persons:[
{id:'001',name:'刘德华',age:18},
{id:'002',name:'张学友',age:18},
{id:'003',name:'郭富城',age:18},
{id:'004',name:'黎明',age:18}
],
girl:{
name:"ALice",
age:28
},
str:"vue"
},
methods:{
},
});
</script>
</html>
- 效果
