首页 > 其他分享 >vue学习十

vue学习十

时间:2023-10-27 19:45:29浏览次数:34  
标签:count vue computed 学习 num counts 合计 methods

<div id="app10">
        <ul>
            <li style="list-style-type: none;" v-for="(item , index) in list" :key="list.id">
                {{ item.num }}
            </li>
        </ul>
        computed合计:{{ count }}
        computed合计:{{ count }}
        computed合计:{{ count }}
        <br>
        methods合计:{{ this.counts() }}
        methods合计:{{ this.counts() }}
        methods合计:{{ this.counts() }}
    </div>
    <script>
        const app10=new Vue({
            el:'#app10',
            data:{
                list:[
                    {id:1,num:2},
                    {id:2,num:2},
                    {id:3,num:2}
                ]
            },
            computed:{
                count(){
                    console.log("computed运行一次")
                    let num=this.list.reduce((sum,item) => sum+item.num,0)
                    return num
                }
            },
            methods:{
                counts(){
                    console.log("methods运行一次")
                    let temp=0
                    for(let i=0;i<this.list.length;i++){
                        temp=temp+this.list[i].num
                    }      
                    return temp
                }
            }
        })
    </script>

 

标签:count,vue,computed,学习,num,counts,合计,methods
From: https://www.cnblogs.com/cocotun/p/17793030.html

相关文章

  • vue学习九
    <divid="app9"style="background-color:aqua;">姓名:<inputtype="text"v-model="name"><br>性别:<inputtype="radio"name=""value="1"v-mo......
  • javaweb学习每日总结-第七天
    第七天学习Mvn模式和三层架构今天回顾了开发的三层框架,做了一个完成一点的小案例,也是亲自感受了一下做项目的一个大概的流程,想要清楚的做完一个项目,那么对流程的安排是至关重要的,下面说说我个人的理解,首先是关注数据库,没有数据一切白搭,在数据库里建好所需的表是第一步,第二步则是......
  • php代码审计学习----骑士cms代码审计
    php代码审计学习----骑士cms代码审计源码下载https://github.com/Betsy0/CMSVulSource环境搭建删掉data里的install.lock然后把源码放在phpstudy的网站目录下访问http://xxx/74cms/install.php使用phpstorm调试使用seay进行辅助代码审计(主要phpstorm不知为什么总是无法......
  • [Vue学习]Vue组件学习
    组件的概念:页面可重复使用的抽象。拓展html在构建应用时候的不足。组件化开发 步骤  1.定义组件  2.App.vue中script里引入组件 importxxxx from'xxxxx'3.在components中注册组件  4.在模板中使用  ......
  • [vue学习]vue目录结构分析
    node_modules 依赖src源码.bablercbable配置.gitignore git忽略文件index.htmlhtml入口文件【通常在这里加移动端的view-port】package.json 管理模块 相当于maven的pom.xmlwebpack.config.jswebpack的配置文件【打包vue的文件,为浏览器能解析的文件】  .vue组件组......
  • 学习笔记二
    I/O库函数I/O数据库是一系列文件操作函数,既方便用户使用,又提高了整体效率。看起来比较优质的I/O库函数汇总,链接如下:https://blog.csdn.net/xiaxiaoyule/article/details/44050507?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blen一、I/O数......
  • 学习笔记一
    引言部分(第一章)安装虚拟机并下载Linux因学院网速较慢,所以我拷贝了同学之前下载好的虚拟机,似乎这个虚拟机也是从老师那里来的。在Linux环境下运行C语言代码创建一个名为test的C语言文件按“i"编辑该文件按ESC键退出编辑,“shift+:”输入”wq“保存并退出编译te......
  • VUE+Ant 自定义cron组件,显示最近运行时间
    先上效果图 自定义组件<template><a-modaltitle="corn表达式":width="modalWidth":visible="visible":confirmLoading="confirmLoading"@ok="handleSubmit"@cancel="close"......
  • 802.11无线网络权威指南学习笔记
    以前在CSDN博客写的,后来不用CSDN,改用cnblogs,没想到在搜索资料时发现了以前被人转载的笔记,做个记录https://blog.csdn.net/machiner1/article/details/41726539......
  • vuex的使用
    1.Vue的入口文件引入Vuex:```importVuexfrom'vuex';Vue.use(Vuex);```2.创建一个Vuexstore实例Store实例是一个单一的数据源,用于存储应用程序的状态。您可以在store实例中定义状态、mutations、actions和gettersconststore=newVuex.Store({state:{//状态},mut......