首页 > 其他分享 >前端-vue基础36-计算属性和方法的区别

前端-vue基础36-计算属性和方法的区别

时间:2023-02-10 10:36:41浏览次数:46  
标签:vue methods 前端 36 reverseString var msg reverseMessage computed

前端-vue基础36-计算属性和方法的区别_vue.js

 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
    </style>
</head>
 
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
        <div>{{reverseString}}</div>
        <div>{{reverseMessage()}}</div>
        <div>{{reverseMessage()}}</div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello',
                num: 100
            },
            methods: {
                reverseMessage: function() {
                    console.log('methods')
                    return this.msg.split('').reverse().join('')
                }
            },
            computed: {
 
                reverseString: function() {
                    console.log('computed')
                        /* return this.msg.split('').reverse().join(''); */
                    var total = 0;
                    for (var i = 0; i <= this.num; i++) {
                        total += i;
                    }
                    return total;
                }
            }
        })
    </script>
</body>
 
</html>

前端-vue基础36-计算属性和方法的区别_其他_02

 

标签:vue,methods,前端,36,reverseString,var,msg,reverseMessage,computed
From: https://blog.51cto.com/u_15460007/6048830

相关文章

  • 前端-vue基础29-表单操作1
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Do......
  • 前端-vue基础39-过滤器
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • 前端-vue基础31-表单域修饰符
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • 前端-vue基础33-自定义指令用法
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • 前端-vue基础28-vue常用特性
      ......
  • 趣学前端 | 容器上的折角边框是图形吗?
    背景我身边一些非互联网技术从业的朋友,偶尔看我转发到朋友圈的文章,会表示出一定的兴趣。前段时间,有朋友问我公众号的问题,所以我来了灵感,准备写一个趣学前端系列,适用于零基础......
  • vue 防抖节流器
    节流器:在一定时间内频繁的触发函数只会执行一次应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进......
  • vue3-使用百度地图遇到的坑-地图实例化
    1、创建地图实例    原因:在使用vue3为了只定义一次地图实例,在所有方法中使用,直接使用如下定义方式:setup(){constdata=reactive({bmap:null,})......
  • docker搭建vue+nginx部署
    Vue+nginx部署1.首先安装ningx镜像 2.将nginx关键目录映射到本机  首先在本机创建nginx的文件存储目录       www:nginx存储网站网页的目录......
  • vue3实现单页crud
    1.介绍主要实现单页curd,包含分页、新增、修改、删除、批量删除、条件搜索、表单校验。导入和导出暂未实现。、本文章只是学习过程。仅供参考。2.代码,按需复制修改即可......