Vue2.0开发之——Vue基础用法-计算属性(28)

最新推荐文章于 2024-01-18 18:30:06 发布

PGzxc

最新推荐文章于 2024-01-18 18:30:06 发布

阅读量283

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript 属性计算

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/128091621

版权

Vue2 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

一概述

计算属性-概述
计算属性-默认方式
计算属性-改造

二计算属性-概述

2.1 什么是计算属性

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

计算属性示例代码

var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(this.rgb)
        }
      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

2.2 计算属性的特点

虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

三计算属性-默认方式

3.1 布局代码

 <div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    <div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
      {{ `rgb(${r}, ${g}, ${b})` }}
    </div>
    <button @click="show">按钮</button>
  </div>

3.2 vue代码

var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
        }
      },
    });

3.3 效果图

四计算属性-改造

4.1 布局代码

<body>
  <div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

4.2 vue代码

var vm = new Vue({
      el: '#app',
      data: {
        r: 0,
        g: 0,
        b: 0
      },
      methods: {
        show() {
          console.log(this.rgb)
        }
      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
 });

4.3 效果图

PGzxc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0开发之——Vue基础用法-计算属性(28)

计算属性-概述计算属性-默认方式计算属性-改造more计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用计算属性示例代码data: {r: 0,g: 0,b: 0},show() {}},rgb() {}}});
复制链接

扫一扫