Vue实践--V-for指令
当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。
当遍历数组的时候有一个可选项index，是当前项的索引 类似与 v-for = (item,[index]) in items;
<ul :class="{bookList:istrue}">
<!-- 循环数组 -->
<li v-for = "(book,index) in books" v-if = "istrue">{{index}}.{{book.bookName}}</li>
</ul>当遍历的数据items是一对象的时候，有两个可选项 key和 index，分别表示当前项的属性名和下标，表达式类似于 v-for = (item,[key],[index]) in items；
<ul>
<!-- 循环对象 -->
<li v-for = "(item,index) of tasks">{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}</li>
</ul>v-for循环是支持用在templete（包裹元素）元素上的，以此来进行多个元素的渲染。数组的更新
vue的核心是数据和视图的双向绑定，按照道理来说，数据发生变化的时候，视图也会发生变化，
vue包含了一些监控数组发生变化的方法（跟原生js中操纵数组的方法差不多）：push（），splice（），pop（）等等，
但是有一些却不能直接触发数组变化：filter（），concat（），slice（）因为这些方法并不是在原数组上做出改变，而是产生了新的数组， 所以要想视图发生改变，可以让产生的新数组赋值给原始数组；
还有一些对数组的操作中Vue是不能检测的到的：1.对数组的中某一项直接改变其值，2.直接改变数组中的长度；
那么，有啥解决办法呢？
对于问题1.例如如果要替换books数组中的第三项，可以用Vue内置set方法：Vue.set(myApp.books,3,{新的数据}),其中Vue.set也可以改为 myApp.$set(一般在webpack中).
对于问题2.可以直接使用splice方法，例如要将books数组长度置为1，可以是myApp.books.splice(1)，
数组的过滤和排序可以通过计算属性来实现（以原始数组为初始数据，通过计算属性返回排序或者过滤后的数组，遍历计算属性）
完整的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
</head>
<body>
<!-- html部分 -->
<div class="container" id="container">
<ul>
<!-- 循环对象 -->
<li v-for = "(item,index) of tasks">{{index}}.我的任务是{{item.name}},完成时间是{{item.time}}</li>
</ul>
<ul :class="{bookList:istrue}">
<!-- 循环数组 -->
<li v-for = "(book,key) in books" v-if = "istrue">{{key}}.{{book.bookName}}</li>
</ul>
<div class="intNum">
<!-- 循环整数 -->
<span v-for = "item in num">{{item}}</span>
</div>
<button @click="ArrayPush">点击查看效果</button>
</div>
<script type="text/javascript" src="../../dist/vue.min.js"></script>
<script type="text/javascript">
/* javascript部分 */
var myApp = new Vue({
el:"#container",
data:{
tasks:{
taskname:{
name:"完成验收模块的调整",
time:new Date(2017,10,11)
},
taskname1:{
name:"完成巡视模块的调整",
time:new Date(2017,10,14)
},
taskname2:{
name:"完成验收发文模块的调整",
time:new Date(2017,10,17)
},
taskname3:{
name:"完成旁站模块的调整",
time:new Date(2017,10,20)
}
},
books:[
{bookName:"javascript高级程序设计"},
{bookName:"你不知道javascript（上）"},
{bookName:"你不知道javascript（中）"},
{bookName:"你不知道javascript（下）"},
],
istrue:true,
num:100
},
methods:{
ArrayPush:function(){
var objOption = {
bookName:"Vuejs实践"
}
this.books.push(objOption)
}
}
})
myApp.books.splice(1)
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： python 字符串与16进制互转
- 下一篇： MATLAB 对Ply文件进行 读取、显示、连线操作
