简介

计算属性关键词: 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计算属性的更多相关文章

  1. Vue之computed计算属性

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

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

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

  3. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  4. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  5. vue的computed计算属性

    computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加  () ,应当普通属性使用 例:console.log(t ...

  6. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  7. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

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

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

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

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

随机推荐

  1. AndroidStudio 中查看获取MD5和SHA1值以及如何查看手机应用信息以及读取*.db数据库里面数据

    查看获取MD5和SHA1值具体操作方式链接 查看获取MD5和SHA1值实际操作命令CMD语句: C:\Users\Administrator>cd .android C:\Users\Admin ...

  2. SpringMVC学习笔记五:使用converter进行参数数据转换

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6832898.html  一:SpringMVC数据绑定机制 1:request到达SpringMVC框架时,框 ...

  3. 〖Linux〗Shell十进制数值转换十六进制

    dec2hex(){ printf } a=$(dec2hex ) echo $a

  4. jqPlot图表插件学习之ajax-json数据加载

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  5. JavaWeb学习笔记1

    表现层实现:先画静态界面(1定义界面须要显示的组件,2初始化组件并设置组件的属性,3把组件放入panel,把panel放入frame)写界面通过代码实现动态功能.  展示数据的步骤:1,i调用逻辑接口 ...

  6. windows下卸载mysql5.5,升级为mysql5.7.25

    0. 停止mysql的服务 1. 卸载mysql5.5 1.1 使用360或者控制面板卸载mysql,为求干净,我使用的360,结果也需要手动清理 1.2 卸载完成之后到mysql的安装目录删掉该目录 ...

  7. 【原创视频教程】SqlServer2008视频教程[共9集]

    这些视频都是13年-14年两年里面录制的,怀着一份创造之心, 可能说得不对,或者说得肤浅,望见谅....也请指正... 谢谢你的支持.. 更多资料:北盟网 www.bamn.cn ---------- ...

  8. AWVS扫描工具使用教程

    上文AppScan扫描工具-工作原理&操作教程有写到Web安全漏洞扫描工具之一的APPScan,除此,还有另外一款国内使用比较主流的Web安全漏洞扫描工具——AWVS.相较于大容量的AppSc ...

  9. LUA可变长参数 ... 三个点

    本文翻译自 LUA官方文档 When a function is called, the list of arguments is adjusted to the length of the list ...

  10. HTTP代理服务器

    一.什么是代理服务器 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站. 在一般情况下,我们使用网络浏览器直接去连接其他Interne ...