<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>列表渲染</title>
</head>
<body>
<div class="app">
<!---->
<ul>
<li v-for='item in items'>
{{item.message}}
</li>
</ul>
<ol>
<li v-for="(item,index) in items">
{{index}}-{{item.message}}
</li>
</ol>
<!--Template v-for-->
<ul>
<template v-for="item in items">
<li>{{item.message}}</li>
<li class="divider"></li>
</template>
</ul>
<!--对象迭代 v-for-你也可以用 v-for 通过一个对象的属性来迭代。-->
<ul id="object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<!--迭代索引方式-->
<ul id="object" class="demo">
<li v-for="(value,item,index) in object">
{{ index }}.{{item}}:{{value}}
</li>
</ul>
<!---组件和v-for-->
<my-component v-for="(item,index) in objItem" v-bind:item="item" v-bind:index="index"></my-component>
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
//组件
Vue.component('my-component',{
template:"<div>{{item.message}}<input type='button' v-bind:value='item.address'/></div>",
props:['item']
});
var vm=new Vue({
el:'.app',
data:{
items:[
{message:'李特成'},
{message:'技术'}
],
object:{
FirstName:"特成",
lastName:'李',
Age:'30'
},
objItem:[
{message:'自学考试',address:'互联网'},
{message:'中山大学',address:'广东'}
]
}
});
</script>
</html>
vue 列表渲染
猜你喜欢
转载自blog.csdn.net/a4561614/article/details/81078382
今日推荐
周排行