计算 ‘ 单价 x 数量 = 总价 ’

watch:就不写了,没意思

computed:
computed:{
allPrice:function(){
return this.price*this.count
}
}
  computed:{
        allPrice:{
            //get只读
            get:function(){
                return this.price*this.count
            },
            //当改变结果allPrice时我们也可以通过set属性里的一些js逻辑来改变参数的值
            set:function(newVal){
                this.price = newVal/this.count
            }
        }
    }
 

只要改变能影响allPrice值的参数,都会立即改变allPrice页面的值,

watch的话需要监听每一个可能会被改变的值,参数过多时需要写很多同样的计算方法,当然可以调用同一个,但没必要

computed计算属性和watch的区别:的更多相关文章

  1. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  2. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  3. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  4. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  5. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  6. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  7. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

  9. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  10. vue-methods方法与computed计算属性的差别

    好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...

随机推荐

  1. verilog之时钟信号的编写2

    verilog之时钟信号的编写2 1.时钟信号的特点 时钟信号除了可以根据时序一个个变化列举出来,还可以利用其循环的变化的特点,使用循环执行语句always来实现.这种方法实现的时钟信号可以一直执行且 ...

  2. 基于vivado中AXI的模型分析

    基于vivado中AXI的模型分析 1.底层代码 `timescale 1 ns / 1 ps module myip_v1_0_S00_AXI # ( // Users to add paramet ...

  3. docker安装es-header及相关问题解决

    安装es-header docker pull mobz/elasticsearch-head:5 docker run --restart=always --name elasticsearch-h ...

  4. HTTP内容协商机制和断点续传

  5. Linux系统 g++ 链接 libopencv_world.a 静态库编译程序

    编译opencv,我是直接编译成 libopencv_world.a  一个文件 正常链接编译,容易报错:main: hidden symbol `opj_read_header' isn't def ...

  6. linux打包Qt,收集依赖库脚本

    编写shell脚本,用来收集Qt的依赖库,避免在无环境裸机上无法运行 1.创建shell脚本:touch pack.sh 2.编辑shell脚本,脚本内容如下:vi pack.sh 3.给脚本增加权限 ...

  7. failed to push some refs to xxxx

    ***************ssh  秘钥上传远程仓库 1. 添加远程仓库ssh 命令   git remote add origin  git@github.com:ThreeNut/zou.gi ...

  8. openGauss/MogDB零字节问题处理

    openGauss/MogDB 零字节问题处理 问题描述:java 应用端程序调用 GZIP 压缩类对数据进行编码压缩后入库 ,然后从数据库取出进行解压,原来再 mysql 数据库中是正常的,但迁移到 ...

  9. HarmonyOS—使用Web组件加载页面

      页面加载是Web组件的基本功能.根据页面加载数据来源可以分为三种常用场景,包括加载网络页面.加载本地页面.加载HTML格式的富文本数据. 页面加载过程中,若涉及网络资源获取,需要配置ohos.pe ...

  10. Maven 三种archetype说明合集【转载】

    Maven 三种archetype说明 新建Maven project项目时,需要选择archetype. 那么,什么是archetype? archetype的意思就是模板原型的意思,原型是一个Ma ...