7vue学习_computed方法的使用

最新推荐文章于 2023-09-18 17:23:29 发布
最新推荐文章于 2023-09-18 17:23:29 发布
阅读量407 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chencaw/article/details/113306763
版权

1、主要代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>

    </style>
</head>
<body>
    <div id ="app">
        <!-- (1)老方法  -->
        <h2>{{firstname+' '+ lastname}}</h2> 
        <h2>{{firstname}} {{lastname}}</h2> 
        <!-- (2)methods  -->
        <h2>{{getFullname()}}</h2> 
        <!-- (3)computed -->
        <h2>{{fullname}}</h2>         
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                firstname: 'chen',
                lastname: 'niu'
            },
            methods:{
                getFullname(){
                    return this.firstname+' '+ this.lastname
                }
            },
            computed:{
                fullname(){
                    return this.firstname+' '+ this.lastname
                }
            }
        })
    </script>
</body>

效果如下

2、computed计算总价格

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>

    </style>
</head>
<body>
    <div id ="app">
        <!-- computed  -->
        <h2>{{totalprice}}</h2>         
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                books:[
                    {id:110,name:'Unix编程艺术',price:122},
                    {id:111,name:'代码大全',price:113},
                    {id:112,name:'深入理解计算机原理',price:88},
                    {id:113,name:'现代操作系统',price:66}                                                          
                ]

            },
            computed:{
                totalprice:function(){
                    let result = 0;
                    for(let i=0;i< this.books.length;i++){
                        result +=this.books[i].price;
                    }
                    //下面是高级用法
                    // for(let book of this.books)
                    // {
                    //     result +=book.price;
                    // }
                    return result
                }
            }
        })
    </script>
</body>

3、compute的setter和getter

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>

    </style>
</head>
<body>
    <div id ="app">
        <!-- computed  -->
        <h2>{{fullname}}</h2>             
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                firstname: 'chen',
                lastname: 'niu'
            },
            computed:{
                fullname: {
                    set:function(newValue){
                        console.log('-----',newValue);
                        const names = newValue.split(' ');
                        this.firstname = names[0];
                        this.lastname = names[1];
                    },
                    get:function(){
                    return this.firstname+' '+ this.lastname;
                    }
                }
            }
        })
    </script>
</body>

4、computed和methods相比，性能更优，有缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>

    </style>
</head>
<body>
    <div id ="app">
        <!-- (1)老方法  不推荐-->
        <h2>{{firstname+' '+ lastname}}</h2> 
        <h2>{{firstname}} {{lastname}}</h2> 
        <!-- (2)methods  -->
        <h2>{{getFullname()}}</h2> 
        <h2>{{getFullname()}}</h2> 
        <h2>{{getFullname()}}</h2> 
        <h2>{{getFullname()}}</h2> 
        <!-- (3)computed -->
        <h2>{{fullname}}</h2>  
        <h2>{{fullname}}</h2>    
        <h2>{{fullname}}</h2>    
        <h2>{{fullname}}</h2>           
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                firstname: 'chen',
                lastname: 'niu'
            },
            methods:{
                getFullname(){
                    console.log('---methods--');
                    return this.firstname+' '+ this.lastname
                }
            },
            computed:{
                fullname(){
                    console.log('---computed--');
                    return this.firstname+' '+ this.lastname
                }
            }
        })
    </script>
</body>

chencaw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
computed的使用
代码青春
03-15 2959
使用计算处理相关数据 如可以是data里申明的数据；可以是其他页面 $emit('的数据'); 还可是自身申明的变量数据 1、vue.js的computed方法： 处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用methods也可以实现同样的效果，但methods在重新渲染的时候会重新调用执行，在性能上computed优于methods,当不需要缓存时可用methods。...
Vue实现computed(Vue原理之步骤六)
最新发布
2401_84435739的博客
04-29 1021
i++){//new一个Watcher的实例,//判断如果存在计算属性,进行遍历i++) {//传入第四个参数,computed是惰性的//把该属性添加到vue实例上,并设置只能取,不能存//返回出去},console.warn(‘请不要给计算属性computed赋值’)})//实例对象上挂载一个和watch同样的方法//实现$set方法//新增的属性也变成响应式的//执行target.//判断类型的函数observe/***///判断data的数据类型。
【Vue】computed方法生成计算属性
看花容易绣花难
11-05 866
computed方法生成计算属性
vue中 computed()方法详解
qq_25741071的博客
08-30 1049
vue中 computed()方法详解
vue中的计算属性
weixin_44628177的博客
05-16 336
计算属性: 1.定义:要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter. 3.get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 5.备注: 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发
computed计算属性与methods
qq_66349348的博客
11-04 780
computed计算属性与methods
vue计算属性computed的使用方法示例
10-17
在Vue中，`computed`属性是一种特殊的数据属性，用于定义基于其他数据属性动态计算的值。这种特性允许开发者将复杂的逻辑从模板中移出，使得模板更加简洁，同时也优化了性能，因为Vue会自动缓存`computed`属性的结果...
vue_computed_props:第7周第2天的作业
04-13
在这个“vue_computed_props”项目中，我们将深入探讨Vue的`computed`属性的使用及其相关知识点。 首先，`computed`属性是用来定义基于Vue实例数据的计算属性。当你有某个数据是基于其他数据的函数结果时，应该使用...
Vue computed计算属性的使用方法
08-29
Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与...
Vue的watch和computed方法的使用及区别介绍
10-18
Vue.js 是一款流行的前端框架，它提供了一种高效的方式来处理数据...理解 `watch` 和 `computed` 的正确使用场景是优化Vue应用性能的关键。在实际开发中，我们应该根据需求选择合适的方法，确保代码既高效又易于维护。
vue中计算属性computed的使用
m0_56079094的博客
01-04 4500
1.vue中计算属性computed的基本使用 <div>{{this.msg1}}</div> <div @click=changeCount(5)>修改count的值</div> data(){ msg:'11', count:2 }, //与computed与data同级 //computed中声明的函数名就是参数名 可以直接使用 例如{{msg1}} 无需在data中声明 //计算机属性中必须有return return内容作为msg1的值
vue计算属性——computed的使用与详解
weixin_64609738的博客
10-21 2221
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。就是说只有相关响应式依赖发生变化才会重新求值 第一次调用计算属性才会执行函数 以后多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。我们可以通过在表达式中调用方法来达到同样的效果。给计算属性赋值 就需用到setter。这两种方式的结果是一致的 不同的是。：求两个数的和显示在页面上。
学习Vue3 第九章（认识computed计算属性）
qq1195566313的博客
02-05 1万+
computed用法 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。 1 函数形式 import { computed, reactive, ref } from 'vue' let price = ref(0)//$0 let m = computed<string>(()=>{ return `$` + price.value }) price.value = 500 2 对象形式 &lt.
【VueJS】深入理解 computed 和 methods 方法
'Ablaze 的专栏
01-03 6111
前言 　　模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如： div id="example"> {{ message.split('').reverse().join('') }} div> computed 方法 　　所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理，同时computed有缓
computed方法使用说明
m0_71732499的博客
09-18 210
子组件 父组件。2.在子组件中写出 computed 返回 定义的数值 并 除以 2，并传给父组件。是用于计算属性的选项。写法也是和methods同一级的，
computed的高级使用
weixin_50755029的博客
04-12 55
如果我们需要双向绑定数据。
计算属性computed和方法methods的区别
前端精髓
05-01 5351
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
vue computed的set方法无效怎么办？
热门推荐
hua_ban_yu的博客
05-10 1万+
vue可以通过set方法将data里面的原始数据改掉，但是为啥监控发现并没有变化，而且set和get打个对调，get输出的值还是不变。原因：默认情况下computed的set方法是不会被执行，只有对重新赋值才会触发computed的set方法。解决方法：只需要对app.fullName进行赋值即可步骤：通过get、set方法对fullName进行赋值，同时在对应的get、set方法里使用conso...
计算属性（computed）
01-20 1697
需求：数据msg值为Hello，我们现在需要反向显示成olleH。 方式1：模板中绑定表达式 <div id="box"> {{msg}} <hr> {{ msg.split('').reverse().join('') }} </div> <script type="text/javascript"> new
vue的computed使用方法
06-06
computed的使用方法如下： 1. 在Vue实例的computed选项中定义计算属性。例如： ``` computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } ``` 2. 在模板中使用计算属性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值