• 技术文章 >web前端 >前端问答

    vue怎么反转数组

    青灯夜游青灯夜游2022-01-10 16:07:05原创79

    vue中可以利用“v-for”指令和计算属性来反转数组,语法“<div v-for="item in reverseDIV">”和“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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vue 反转数组
    上一篇:vue有什么性能优化方法 下一篇:html中script有什么用

    相关文章推荐

    • 带你深入了解vue2中的 v-model,看看如何让组件支持该语法• vue中v-bind和v-model的区别是什么• 推荐 20 个近期比较“火热”的Vue项目(值得收藏)• 简单聊聊Vue3中的Hook特性(总结分享)• vue怎样解决axios请求出现前端跨域问题(实例详解)• Vue实例要怎么挂载?聊聊实例挂载的过程

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网