<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<template v-for="(item,index) of list"
:key="item.id">
<div>
{{item.text}}---{{index}}
</div>
<span>{{item.text}}</span>
</template>
</div>
<script>
/*创建了一个vue实例*/
var vm = new Vue({
el: '#app',
data: {
list: [{
id: "00001",
text: "welcome"
}, {
id: "00002",
text: "to"
}, {
id: "00003",
text: "gblfy.com"
}
]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表渲染</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item,key,index) of userInfo"
:key="item.id">
{{item}}--{{key}}--{{index}}
</div>
</div>
<script>
/*创建了一个vue实例*/
var vm = new Vue({
el: '#app',
data: {
userInfo: {
name: "ly",
age: 22,
gender: "male",
salary: "secret"
}
}
});
</script>
</body>
</html>
利用api添加数据或者改变对象或者数组的引用
