<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染v-for</title>
</head>
<body>
<ul id="box">
<li v-for="item in items"> 可以写成比较像js原生语法：v-for="item of items"
{{item.message}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
items:[
{message:'foo'},
{message:'bar'}
]
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染v-for</title>
</head>
<body>
<ul id="box">
<li v-for="(item,index) in items">
{{parentMessage}}-{{index}}-{{item.message}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
parentMessage: 'Parent',
items:[
{message:'foo'},
{message:'bar'}
]
//数组里面包含多个对象
}
})
</script>
</html> -->
<!-- 用v-for来循环对象的属性 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用v-for来循环对象的属性</title>
</head>
<body>
<ul id="box" class="demo">
<li v-for="value in object" v-bind:style="style">
{{ value }}
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
object:{
FirstName:'John',
LastName:'Doe',
Age:25 //v-for不仅可以用来循环对象集合，也可以用来循环单个对象中的多个属性值；
},
style:{
listStyle:'none'
}
}
})
</script>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用v-for来循环对象的属性</title>
</head>
<body>
<ul id="box" class="demo">
<li v-for="(value, key, index) in object" v-bind:style="style">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
object:{
FirstName:'John',
LastName:'Doe',
Age:25
},
style:{
listStyle:'none'
}
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用v-for来循环对象的属性</title>
</head>
<body>
<ul id="box" class="demo">
<li v-for="n in 10" v-bind:style="style">
{{ n }} 循环若干次数，并不需要处理循环数据，那么，还是v-for可以胜任。
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
}
})
</script>
</html>
结果<12345678910-->
<!-- push() //在结尾增加一条或多条数据
pop() //删除最后一条数据
shift() //删除第一条数据，并返回这条数据
unshift() //在开始增加一条或多条数据，并返回数组长度
splice() //向/从数组中添加/删除项目，然后返回被删除的项目。
sort() //对数组的元素进行排序。
reverse() //颠倒数组中元素的顺序。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染v-for</title>
</head>
<body>
<ul id="box">
<li v-for="item in items"> <!-- 可以写成比较像js原生语法：v-for="item of items" -->
{{item.message}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var obj=new Vue({
el:'#box',
data:{
items:[
{message:'foo'},s
{message:'bar'}
],
},
vm.items.push({ message: 'Baz' }),
})
</script>
</html>
// 二次视频学习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in sortItems"> <!-- 循环哪个标签把v-for放到哪里，items 把值放到item里 进行循环 -->
{{item}}
</li>
</ul>
<ul>
<li v-for="(student,index) in students">
{{index+1}}:{{student.name}},{{student.age}}
</li>
</ul>
<h3>年龄排序</h3>
<ul>
<li v-for="(student,index) in sortStudents">
{{index+1}}:{{student.name}},{{student.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
items:[12,34,54,23,21,78,79], //这是一个数组
students:[
{name:'jinsuo',age:23},
{name:'caicai',age:28},
{name:'Liyuan',age:25}
]
},
computed:{
sortItems:function(){
return this.items.sort(sortNumber) //sort() 方法用于对数组的元素进行排序。 参数：可选。规定排序顺序。必须是函数。
},
sortStudents:function(){
return sortByKey(this.students,'age');
}
}
});
function sortNumber(a,b){
return a-b;
}
//数组对象方法排序
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key]; // [] 里是个变量 a代表 的是数组中的第一个json对象 。 a.age 因为age是个变量
var y=b[key];
return((x<y)?-1:((x>y)?1:0));
})
}
</script>
</html>