vue中可以利用“v-for”指令和计算属性来反转数组,语法“
”和“computed:{reverseDIV(){return this.items.reverse()}}”。本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
vue反转数组的方法
方法一:
<template> <div> <div v-for="item in Array.prototype.reverse.call(items)"> <li>{{item}}</li> </div> </div> </template> <script> export default { name: "List", data(){ return{ items:[1,2,3,4] } }, } </script>登录后复制方法二(计算属性):
<template> <div> <div v-for="item in reverseDIV"> <li>{{item}}</li> </div> </div> </template> <script> export default { name: "List", data() { return { items: [1, 2, 3, 4] } }, computed: { reverseDIV() { return this.items.reverse() } } } </script>登录后复制说明:计算属性
类型:{ [key: string]: Function | { get: Function, set: Function } }
详细:
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
computed: { aDouble: vm => vm.a * 2 }登录后复制计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。
主要是不污染源数据的情况下我们进行的一系列操作
【相关推荐:vue.js教程】
以上是vue怎么反转数组的详细内容。更多信息请关注PHP中文网其他相关文章!