Javascript

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

本文主要是介绍第六十七篇：Vue的计算属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

好家伙，

 

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的计算属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航