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的核心是数据和视图的双向绑定，按照道理来说，数据发生变化的时候，视图也会发生变化，
v ue包含了一些监控数组发生变化的方法（跟原生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>

Vue实践--V-for指令相关推荐

【Vue】v-bind v-model指令的使用（实现计算器效果）
在Vue学习笔记(一)中,我们已经了解了Vue中的基本指令,比如 v-text,v-html,v-bind,v-on 等指令的使用,并且介绍了 MVVM 模式,那么怎么实现动态的在M和V之间数据传递呢 ...
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
vue给元素添加指令_Vue指令动态模糊元素
vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide eleme ...
Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
vue实践06-项目实践
vue实践06-项目实践 vue-cli创建项目项目采用Webpack+Vue-router的架构方式,在命令行中,进入项目目录,使用npm install 安装package.json里项目的依赖 ...
【Vue】v- xxx 基础指令
文章目录 v- xxx 基础指令 1.v-text 文本指令 2.v-html 标签指令 3.v-on 事件指令实战:计数器补充 4.v-show 图片指令 5.v-if 条件指令 6.v-bin ...
Vue教程(八)v-bind指令动态绑定
Vue教程(八)v-bind指令动态绑定 v-bind动态绑定 <!DOCTYPE html> <html lang="en"> <head>& ...
【Vue系列1】—— Vue入门和基础指令
点赞多大胆,就有多大产!开源促使进步,献给每一位技术使用者和爱好者! 干货满满,摆好姿势,点赞发车 ** 这是Vue框架的第一篇,也不说多重要,掌握的必要性这些了,懂的都懂,直接干货怼起来! ** 学 ...
vue单文件自定义指令的封装
vue单文件自定义指令的封装第一步(封装一个js文件) // 暴露并配置指令功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...

Vue实践--V-for指令

Vue实践--V-for指令相关推荐

最新文章

热门文章