站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

vue怎么反转数组

时间:2022-01-11 [网络编程]作者:fabuyuan 浏览:6 次

vue中可以利用“v-for”指令和计算属性来反转数组,语法“<div v-for="item in reverseDIV">”和“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怎么反转数组的详细内容,更多请关注站长家园其它相关文章!

本文标签:  vue反转数组

转载请注明来源:vue怎么反转数组

本文永久链接地址:https://www.adminjie.com/post/7513.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle中with的用法是什么

      oracle中with的用法是什么

      在oracle中,with语句可以实现子查询,用于创建一个公共临时表,提高语句执行的效率,语法为“withtempNameas(select....)s...

    • html中改变字体颜色和大小的代码是什么

      html中改变字体颜色和大小的代码是什么

      html中改变字体颜色和大小的代码是“<标签名style="color:颜色值;font-size:字体大小值;">字体内容</标签名>...

    • 记一个ThinkPHP框架的渗透实战

      记一个ThinkPHP框架的渗透实战

      下面thinkphp框架教程栏目将给大家分享一个ThinkPHP框架渗透实战,希望对需要的朋友有所帮助!信息收集找到一个网站http://x.x.x.x/下...

    • mysql锁表的原因是什么

      mysql锁表的原因是什么

      在mysql中,锁表的原因是一个程序执行了对表的insert、update或者delete操作还未commite时,另一个程序也对同一个表进行相同的操作,则此时...

    • css上下文选择器的类型有什么

      css上下文选择器的类型有什么

      css上下文选择器有四种类型:1、后代选择器,可选择当前元素的所有后代元素;2、父子选择器,可选择当前元素的所有子元素;3、同级相邻选择器,可选择拥有共同父级且...

    热门文章