Vue(七):computed计算属性
简介
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
实例1
可以看下以下反转字符串的例子:
<div id="app">
{{ message.split('').reverse().join(' | ')}}
</div> <script>
new Vue({
el: '#app',
data: {
message: '上海自来水来自海上'
}
})
</script>
上面例子中模板变的很复杂起来,也不容易看懂理解。
实例2
接下来我们看看使用了计算属性的实例:
<div id="app">
{{message}}
<br>
{{reverseMessage}}
</div> <script>
new Vue({
el: '#app',
data: {
message: '上海自来水来自海上'
},
computed:{
// 计算属性的 getter
reverseMessage:function(){
// `this` 指向 vm 实例
return this.message.split('').reverse().join(' | ')
}
}
})
</script>
上面实例中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
vue.js里computed 和 methods的区别
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
<div id="app">
{{message}}
<br>
{{reverseMessage1()}}
<br> <!--注意方法是要加上()的,而属性不需要-->
{{reverseMessage2}}
</div> <script>
new Vue({
el: '#app',
data: {
message: '上海自来水来自海上'
},
methods:{
reverseMessage1:function(){
// `this` 指向 vm 实例
return this.message.split('').reverse().join(' # ')
}
},
computed:{
reverseMessage2:function(){
// `this` 指向 vm 实例
return this.message.split('').reverse().join(' | ')
}
}
})
</script>
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
<div id="app">
<p>{{ userinfo }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
username: '刘凯',
department: '财务部'
},
computed: {
userinfo: {
// getter
get: function () {
return this.username + '#' + this.department
},
// setter
set: function (newinfo) {
var infos = newinfo.split('#')
this.username = infos[0]
this.department = infos[infos.length - 1]
}
}
}
})
// 调用 setter, vm.username 和 vm.department 也会被对应更新
vm.userinfo = '张晓晓#销售部';
document.write('username: ' + vm.username);
document.write('<br>');
document.write('department: ' + vm.department);
</script>
vm.userinfo = '张晓晓#销售部'这一行代码是关键,分别注释掉和打开注释运行这段代码,分别会出现一下两种结果
刘凯#财务部 username: 刘凯
department: 财务部
张晓晓#销售部 username: 张晓晓
department: 销售部
Vue(七):computed计算属性的更多相关文章
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue中computed计算属性
话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...
- Vue中computed(计算属性)、methods、watch的区别
实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...
- vue的computed计算属性
computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加 () ,应当普通属性使用 例:console.log(t ...
- Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...
- vue中computed计算属性与methods对象中的this指针
this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...
- 小白学习vue第三天,从入门到精通(computed计算属性)
computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
随机推荐
- Atlas系列一:【已解决】error while loading shared libraries: libcrypto.so.6: cannot open shared object file: No such file or directory
1:Atlas的安装 https://github.com/Qihoo360/Atlas/wiki/Atlas的安装 2: [root@localhost bin]# ./mysql-proxyd t ...
- 【Zookeeper】源码分析之持久化(三)之FileTxnSnapLog
一.前言 前面分析了FileSnap,接着继续分析FileTxnSnapLog源码,其封装了TxnLog和SnapShot,其在持久化过程中是一个帮助类. 二.FileTxnSnapLog源码分析 2 ...
- Oracle Data Integrator 12c-----场景(Scenario)和调度(Schedule)
1 生成场景 Designer->项目->ODI_Exercise ->第一个文件夹->包->First _Pkg,右键,"生成场景" " ...
- 【FinancialKnowledge】商业银行业务知识
商业银行业务思维导图 一.资产业务 资产业务是商业银行的主要收入来源 1.放款业务 1.1 信用放款 信用放款,是单凭借款人的信誉, 不需要提供任何抵押品的放款,是一种资本放款. 1.1.1 普通借款 ...
- chrony 时间同步
RHEL7.4 192.168.100.1 作为时间服务器,其它主机到这台来同步时间. 时间服务器安装及配置:#yum install chrony --RHEL7默认已安装chrony,而没有安装n ...
- Spring Cloud开发实践 - 01 - 简介和根模块
简介 使用Spring Boot的提升主要在于jar的打包形式给运维带来了很大的便利, 而Spring Cloud本身的优点不是那么明显, 相对于Dubbo而言, 可能体现在跨语言的交互性上(例如可以 ...
- StatefulSet和Deployment的区别
“Deployment用于部署无状态服务,StatefulSet用来部署有状态服务”. 具体的,什么场景需要使用StatefulSet呢?官方给出的建议是,如果你部署的应用满足以下一个或多个部署需求, ...
- centos中执行apt-get命令提示apt-get command not found
先说结论: 在centos下用yum install xxx yum和apt-get的区别: 一般来说著名的linux系统基本上分两大类: RedHat系列:Redhat.Centos.Fedora ...
- JavaScript HTML DOM 入门详解
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...
- 九款命令行工具助力Linux环境下的数据分析
对于大多数熟悉了图形工作环境的朋友来说,电子表格工具无疑是第一选项.但命令行工具同样能够更快更高效地解决问题——且只须稍微学习即可上手. 大部分此类工具冻严格局限于Linux,而多数可同样运行在Uni ...