初学Vue（四）-- 计算属性，监视方法

kelvinlee 发布于2019-08-26 14:00 / 976人阅读

摘要：计算属性与监视方法计算属性计算属性，顾名思义是可以计算数据的属性，为什么要特意出个计算属性呢，因为如果直接将两个数据加起来的话，使用加法计负数的算双向绑定数据时就会出现问题计算属性用法代码案例加法计算器首先计算器我们想要用户输入所以

计算属性与监视方法 计算属性 -- computed

计算属性，顾名思义是可以计算数据的属性，为什么要特意出个计算属性呢，因为vue如果直接将两个数据加起来的话，使用加法计负数的算双向绑定数据时就会出现问题

计算属性用法 -- computed

代码案例：加法计算器

首先计算器我们想要用户输入所以建立两个双向绑定的变量数据

在computed属性中让函数的返回的结果赋予变量数据c

返回语句显示转换将两个双向绑定的数据转为Number型计算后将值返回

html部分：
+
=
{{c}}

js部分：
new Vue({
    el:"body",
    data:{
        a:"",
        b:"",
    },
    computed:{
        c:function(){
            return Number(this.a)+Number(this.b);
        }
    }
})

监视方法 -- $watch

代码案例：加法计算器

$watch 方法是当监听的变量产生变化时会运行它的处理函数

这个方法是Vue 实例的方法，所以创建一个变量a 来储存创建储存了想要监听的数据的Vue实例，在Vue实例后面接这个方法也是可以的。

html部分：
+
=
{{c}}

js部分：
var a = new Vue({
    el:"body",
    data:{
        a:"",
        b:"",
        c:""
    }
})
a.$watch("a",function(){
    a.c=Number(a.a)+Number(a.b);
});
a.$watch("b",function(){
    a.c=Number(a.a)+Number(a.b);
})

云服务器服务器托管 vue的计算属性 vue实例属性 vue.js 属性属性定义方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109956.html

vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0
vue组件初学习（一）---初学者文档

摘要：在有时候，组建也可以是原生的元素。简单的说，就是组件是有结构的有样式的，有交互效果，有行为，信号量可以存数据。组件可以通过属性开设置。一、什么是组件？组件是vue.js最强大的功能之一，它可以扩展HTML元素，封装可以重用的代码. 当然，在更高的层面上，组件是自定义元素，vue.js的编译器为它添加了特殊功能。在有时候，组建也可以是原生的HTML元素。简单的说，就是组件是有结构...

HmyBmny 2019-08-21 17:37 评论0 收藏0