Vue学习之 --- 计算属性

最新推荐文章于 2023-07-24 16:33:17 发布

吾心流云

最新推荐文章于 2023-07-24 16:33:17 发布

阅读量320

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_33736036/article/details/128178441

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值，这个动态计算出来的属性值可以用被模板结构或methods方法使用。

当代码中多次用到某一个属性(不管是字符串还是number类型的值) 就如下代码：

<script src="../lib/vue.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>
<body>
   <div id="app">
       <div>
        <span> Red 的值:</span>
        <input type="text" v-model.number="Red">
       </div>

       <div>
        <span> Green的值:</span>
        <input type="text" v-model.number="green">
       </div>
   
       <div>
        <span> Blue 的值:</span>
        <input type="text" v-model.number="blue">
       </div>
       <hr>
       <!-- 以下 拼接字符串`rgb(${Red}, ${green}, ${blue})` 中的 `  不能写作单引号形式 'rgb(${Red}, ${green}, ${blue})'-->
       <div class="box" :style=" { backgroundColor:`rgb(${Red}, ${green}, ${blue})`}">
        {{ `rgb(${Red}, ${green}, ${blue})` }}
       </div>
       <button @click="show"> 记录 </button>
   </div>
   <script>
         var Vm = new Vue({
               el:"#app",
               data:{
                Red:0,
                green:0,
                blue:0
               },
               methods:{
                show() {
                    console.log(`rgb(${this.Red}, ${this.green}, ${this.blue})`)
                 }
               }
            }
         )
  </script>

上面代码中有3出用到：rgb(${Red}, ${green}, ${blue})，这样就造成代码冗余。如果要修改某一个字符则要修改多处实在不是最优的方式。 so Vue中就专门为此搞了一个节点叫做计算属性节点 — computed，优点：实现了代码复用，只要计算属性中依赖的数据源变化了，则计算属性会自动更新！

该节点特点：

定义的时候，要当做方法即函数形式
使用的时候，要当做普通属性使用就行

则上述代码优化后如下：

<script src="../lib/vue.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>
<body>
   <div id="app">
       <div>
        <span> Red 的值:</span>
        <input type="text" v-model.number="Red">
       </div>

       <div>
        <span> Green的值:</span>
        <input type="text" v-model.number="green">
       </div>
   
       <div>
        <span> Blue 的值:</span>
        <input type="text" v-model.number="blue">
       </div>
       
       <div class="box" :style=" { backgroundColor:rgb}">{{ rgb }} </div>
       <button @click="show"> 记录 </button>
   </div>
   <script>
         var Vm = new Vue({
               el:"#app",
               data:{
                Red:0,
                green:0,
                blue:0
               },
               methods:{
                   show() {
                    console.log(this.rgb)//直接当做成属性字符串使用就行
                  }
               },
               // 所有的计算属性，都要定义到computed的节点下
               computed:{
                    // 计算属性在定义的时候，要定义成 方法格式即函数
                    rgb(){
                        return `rgb(${this.Red}, ${this.green}, ${this.blue})`
                    }
               }
            }
         )
   </script>