vue怎么反转数组

青灯夜游
发布: 2022-01-10 16:07:05
原创
4291 人浏览过

vue中可以利用“v-for”指令和计算属性来反转数组,语法“

”和“computed:{reverseDIV(){return this.items.reverse()}}”。

vue怎么反转数组

本教程操作环境: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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板