计算属性的基本使用

初始小示例:

代码:

window.onload = () =>{

                new Vue({
el:'div',
data:{
msg:''
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br /> </div>

直接在HTML中使用toUpperCase()方法,这样使得代码太长,影响代码的逻辑;因此就引入了计算属性的应用

Vue计算属性:

更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视;

计算属性的使用;

https://cn.vuejs.org/v2/guide/computed.html#计算属性

计算属性的vue代码:

<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){ return this.msg.toUpperCase();
}
} })
} </script>

html:

<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br />
计算属性显示:{{msg1}}<br /> </div>
</body>
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的基本使用</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){ return this.msg.toUpperCase();
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br />
计算属性显示:{{msg1}}<br /> </div>
</body>
</html>

计算属性的基本使用

计算属性的getter和setter

computed:{
num1:function(){ return this.num+;
}
}

因此需要将num1转化为数据类型:

<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
num1:function(){ return parseInt(this.num) +;
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br /> 计算属性显示:{{num1}}<br /> </div>
</body>

直接修改num1:

直接修改报错的代码:

<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
num1:function(){ return parseInt(this.num) +;
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
</body>

因此我们可以认为计算属性时默认是隐式的getter方法

定义get与set方法:

        computed:{

                      num1:{
get:function(){
return parseInt(this.num) +;
},
set:function(value){
return this.num=value; } }
}

注意:在写显式的set方法时需要给它依赖的属性赋值

HTML:

<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的getter和setter</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
// num1:function(){
//
// return parseInt(this.num) +10;
// } num1:{
get:function(){
return parseInt(this.num) +;
},
set:function(value){
return this.num=value; } }
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
</body>
</html>

计算属性的getter和setter

计算属性与方法的区别

计算属性有缓存机制,方法没有;

只要计算属性内相关依赖的值不发生改变,多次调用计算属性可以从缓存中获取值,不必重复计算;

方法每次调用都要重新执行一遍;

依赖值发生改变时都会发生调用;

示例:

属性与方法都可以将小写变为大写

其vue代码为:

<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){
console.log("$$$$computed"); return this.msg.toUpperCase();
}
},
methods:{ upperCase(){
console.log('####methods');
return this.msg.toUpperCase(); },
show(){
console.log("计算属性"+this.msg);
console.log("方法的调用"+this.upperCase());
} } })
} </script>

html:

<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br /> 计算属性显示:{{msg1}}<br />
方法显示:{{upperCase()}}<br />
<button @click="show">show</button> </div>
</body>
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性与方法的区别</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){
console.log("$$$$computed"); return this.msg.toUpperCase();
}
},
methods:{ upperCase(){
console.log('####methods');
return this.msg.toUpperCase(); },
show(){
console.log("计算属性"+this.msg);
console.log("方法的调用"+this.upperCase());
} } })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br /> 计算属性显示:{{msg1}}<br />
方法显示:{{upperCase()}}<br />
<button @click="show">show</button> </div>
</body>
</html>

计算属性与方法的区别

Vue基础进阶 之 计算属性的使用的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. Vue基础练习之计算属性、方法、监听器

    <body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...

  3. vue.js初探:计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  4. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  5. Vue基础进阶 之 常用的实例属性

    Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...

  6. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  7. vue 自学笔记(三) 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  8. Vue.js系列之四计算属性和观察者

    一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...

  9. Vue基础知识之常用属性和事件修饰符(二)

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

随机推荐

  1. OpenShift nfs 持久化

    创建PV { "apiVersion": "v1", "kind": "PersistentVolume", " ...

  2. ssh 的认证原理

    SSH:Secure Shell,是一种网络安全协议,主要用于登录远程计算机的加密过程. 登录方式主要有两种: 1.基于用户密码的登录方式:   加密原理:   当服务器知道用户请求登录时,服务器会把 ...

  3. python class 1

    //test.py class Employee: 'all employee' empCount = 0 def __init__(self, name, salary): self.name = ...

  4. python 读取excel数据并将测试结果填入Excel

    python 读取excel数据并将测试结果填入Excel 读取一个Excel中的一条数据用例,请求接口,然后返回结果并反填到excel中.过程中会生成请求回来的文本,当然还会生成一个xml文件.具体 ...

  5. ida调试ios应用

    收集,整理http://www.cnblogs.com/fply/p/8488842.html 这个文章讲了ios上debugserver相关配置 http://iphonedevwiki.net/i ...

  6. MyBatis基础入门《十》添加数据

    MyBatis基础入门<十>添加数据 描述: 修改了实体类:TblClient.java,将其字段:cbirthday 由String类型改成了Date类型. TblClient.java ...

  7. word中加入endnote

    http://jingyan.baidu.com/article/f54ae2fc3926d91e92b849c2.html 1.如果安装完endnote后,word中没有出现 endnote菜单,则 ...

  8. 恢复Windows10应用商店

    用管理员权限运行powershell,输入 Get-AppxPackage -AllUsers| Foreach {Add-AppxPackage -DisableDevelopmentMode -R ...

  9. ubuntu安装启动redis

    1.下载安装 sudo apt-get  install  build-essential wget http://redis.googlecode.com/files/redis-2.2.13.ta ...

  10. nw.js package一般设置

    { "name": "app name", "main": "mainpage",                    ...