云南定制化网站建设,专业的电商网站建设公司,小程序开发公司在哪,请问大连谁家做网站如果阅读有疑问的话#xff0c;欢迎评论或私信#xff01;#xff01; 文章目录 列表渲染v-forv-for 与对象在 v-for 里使用范围值template 上的 v-forv-for与v-if通过key管理状态组件上使用v-for数组变化侦测 列表渲染
v-for
在我们想要渲染出一个数组中的元素时#xf… 如果阅读有疑问的话欢迎评论或私信 文章目录 列表渲染v-forv-for 与对象在 v-for 里使用范围值template 上的 v-forv-for与v-if通过key管理状态组件上使用v-for数组变化侦测 列表渲染
v-for
在我们想要渲染出一个数组中的元素时在JavaScript中我们可能会想到循环使用document.createElement创建标签并且赋予变量值。
而vue中提供给了我们v-for指令可以更方便快捷的渲染一个列表标签。v-for中的值需要使用item in items的语法其中item是别名也就是自命名的变量用于在当前作用域中使用。而items是一个数组名。例如
templatep v-formyCustom in myArr classactive{{ myCustom }}/p
/templatescript
export default {data() {var myArr [1,2,3,4,5,6,7,8,9,10]return {myArr};}
};
/script该代码渲染除了10个p标签并且同时class等属性也会保存。
除此之外我们可以使用v-for指令的第二个可选参数来使用数组中的索引值。例如
templatep v-for(myCustom,index) in myArr classactive{{ myCustom }} - {{ index }}/p
/templatescript
export default {data() {var myArr [1,2,3,4,5,6,7,8,9,10]return {myArr};}
};
/script在官方文档中有一句话在 v-for 块中可以完整地访问父作用域内的属性和变量。也就是我们可以访问myArr的同胞属性emm…这个应该本来是可以的吧只要是这个实例中data返回的对象都可以被插入到DOM中。这句话也可能是为了给下文嵌套v-for讲的。
在多层嵌套的v-for中作用域的方式和多层嵌套for循环的方式比较像父作用域无法访问子作用域而子作用域可以方法父作用域。例如
li v-foritem in itemsspan v-forchildItem in item.children{{ item.message }} {{ childItem }}/span
/li在vue文档中提到可以使用of分隔符替代in这个用法的意图可能是为了根据用户不同风格提供的在JavaScript中for-of用来遍历一个对象来表示每个对象值而for-in会返回索引值。具体怎么使用都可以自己怎么喜欢怎么来。例如
div v-formyCustom of myArr/divv-for 与对象
v-for指令对数组和对象的使用方法类似只是对于对象第二个参数为对象的键第三个参数才是目前迭代的位置索引。关于v-for对对象键的遍历来源于ES6中Object原型上的keys方法所得到的数组。
例如
templatep v-for(myCustom,currentKey,currentIndex) in author classactive{{ myCustom }} - {{ currentKey }} - {{ currentIndex }}/p
/templatescript
export default {data() {var author {name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery,],};return {author};}
};
/script输出效果 John Doe - name - 0 [ “Vue 2 - Advanced Guide”, “Vue 3 - Basic Guide”, “Vue 4 - The Mystery” ] - books - 1 在 v-for 里使用范围值
v-for 可以直接接受一个整数值。在这种用例中会将该模板基于 1...n 的取值范围重复多次。
span v-forn in 10{{ n }}/span注意此处 n 的初值是从 1 开始而非 0。
template 上的 v-for
与模板上的 v-if 类似你也可以在 template 标签上使用 v-for 来渲染一个包含多个元素的块。例如
ultemplate v-foritem in itemsli{{ item.msg }}/lili classdivider rolepresentation/li/template
/ulv-for与v-if
在vue风格指南中有一句话Never use v-if on the same element as v-for. 不要将v-if和v-for使用在同一个元素上 vue解释了下面两种情况 如果你想要先过滤一个列表然后决定列表中该元素是否显示可以这样做 templateul v-forcurrentValue in myArrli v-ifcurrentValue.isActive{{ currentValue.myNumber }}/li/ul
/templatescript
export default {data() {var myArr [{myNumber:1,isActive:true},{myNumber:2,isActive:false},{myNumber:3,isActive:true},{myNumber:2,isActive:false}]return {myArr};}
};
/script控制台输出1 3 如果你想要先决定是否显示一个列表然后再进行过滤可以这样做 templateul v-ifshowList li v-forcurrentValue in myArr{{ currentValue.myNumber }}/li/ul
/templatescript
export default {data() {var showList true;var myArr [{myNumber:1,isActive:true},{myNumber:2,isActive:false},{myNumber:3,isActive:true},{myNumber:2,isActive:false}]return {myArr,showList};}
};
/script控制台输出1 2 3 4
通过key管理状态
我们知道vue是有自己的响应式系统大部分数据都是有响应式的功能那么v-for中的数据应该也有响应式功能。也就是在v-for中的数据发生改变时渲染出的列表也应该直接更新。
对于v-for的更新策略vue的默认策略是“就近更新”也就是不变动DOM的渲染顺序而是直接改变渲染值。
我们来看两组代码
不带key
templatediv p v-for (item,index) in keyTest {{ item.myName }} -------- input typetext/pbutton clickadd()添加/button/div
/templatescript
export default {data() {var keyTest [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest};},methods: {add(){this.keyTest.unshift({id:10,myName:新的});}},
};
/script带key
templatediv p v-for (item,index) in keyTest {{ item.myName }} -------- input typetext/pbutton clickadd()添加/button/div
/templatescript
export default {data() {var keyTest [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest};},methods: {add(){this.keyTest.unshift({id:10,myName:新的});}},
};
/script由效果图可以看出带key之后插入元素不影响input中的值而不带key时只是在后面插入一个新DOM之后修改之前的数据。
组件上使用v-for
等学完组件知识之后更新暂存…
数组变化侦测
Vue可以侦听响应式数组的变更方法前提是该方法会使数组变化。例如
push() 在数组末尾插入一个值并返回修改后的数组长度pop() 删除数组中最后一个值并返回该值shift()在数组第一个值之前插入一个值并返回修改后的数组长度unshift() 删除数组中第一个值并返回该值splice() 在数组中指定位置插入或删除元素sort() 对数组进行排序并返回数组reverse() 颠倒数组中元素的位置
对数组操作时有的方法会直接改变数组值而有的方法会返回一个修改后的新数组(数组副本)。大部分过于方法只会返回一个新数组我们可以将旧数组值使用新数组覆盖并且vue实现了一些性能更高的DOM元素重用方法。
