首页 > 其他分享> 文章详细

第六十七篇：Vue的计算属性

2022-04-13 00:02:24 阅读：130 来源： 互联网

标签：Vue console 第六十七篇 show 复用 rgb 计算属性

好家伙，

1.什么是计算属性？

首先它是一种属性，其次他有计算这个特殊的性质，

它是一个依赖于其他属性的属性，当依赖的属性发生变化的时候就会触发我们计算属性的逻辑

它会对这个属性进行计算，

所以说它是能够在里面写一些计算逻辑的属性，

所以它叫计算属性（好绕）

2.为什么是计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护。

使用计算属性可以进行代码复用，

从而可以达到“逻辑复用”的效果

特点：

1．定义的时候，要被定义为“方法”

2．在使用计算属性的时候，当普通的属性使用即可

好处：

1．实现了代码的复用

2．只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

3.举个例子:

举个例子,做一个可以控制颜色的框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv=""> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Great</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    
    <div id="app">
       <div>
           <span>R:</span>
           <input type="text" v-model="r">
        </div>
        <div>
            <span>G:</span>
            <input type="text" v-model="g">
         </div>
         <div>
            <span>B:</span>
            <input type="text" v-model="b">
         </div>
        <div class="box" :style="{ backgroundColer:`rgb(${r},${g},${b})`}">
             {{ `rgb(${r},${g},${b})`  }}
        </div>
        <button @click="show">确定</button>
       
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
     
        const vm = new Vue({
            
            el:'#app',
           
            data:{

                r:0,
                g:0,
                b:0,
               
            },
            methods:{
                show(){
                    console.log(`rgb(${this.r},${this.g},${this.b})`)
                                
             },
            computed:{
                //rgb作为一个计算属性别定义为方法格式
                //最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串

              //rgb(){
              //      return `rgb(${this.r},${this.g},${this.b})`
              //  },
            }
        }
            });
            
            console.log(vm)
            
       

    </script>
</body>



</html>

效果如下:

在上述代码中,

`rgb(${this.r},${this.g},${this.b})`

这一属性反复出现

当我们需要对属性名进行修改或者进行值的更改时会变得非常麻烦

于是这里我们用到计算属性

methods:{
             show(){
                  console.log(rgb)
                                
             },
            computed:{
                //rgb作为一个计算属性别定义为方法格式
                //最终,在这个方法中,要返回一个生成好的rgb(x,x,x)的字符串

              rgb(){
                    return `rgb(${this.r},${this.g},${this.b})`
                },
            }
        }

实现了

`rgb(${this.r},${this.g},${this.b})`

的复用,这个例子还行,体现了计算属性的价值,

(其实只有show方法那里能改)

That's all

标签：Vue,console,第六十七篇,show,复用,rgb,计算,属性
来源： https://www.cnblogs.com/FatTiger4399/p/16138296.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9