VueJS计算属性: computed
computed属性
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
效果：
实例中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
效果:
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ site }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>
效果：
从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
VueJS计算属性: computed的更多相关文章
- Vue学习3：计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 计算属性 computed
计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
随机推荐
- xctf --Hctf2014 Quals write up
描述 猫流大大发现一个女神,你能告诉我女神的名字么(名字即是flag) nvshen.zip Solution: Extract the file and we could find a txt wh ...
- Normalize.css用法
1 Normalize.css用法 重置样式非常多,Normalize.css和reset是两个常用的重置 CSS 文件 http://necolas.github.io/normalize.css/ ...
- Perm 排列计数（bzoj 2111）
Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic ...
- dedeCMS php标签使用说明和数据库查询说明
1.{dede:php}标签想要输出信息 可以直接使用printf , echo,var_dump 之类的打印出来 赋值给@me 无效 2.结合sql语句使用方法 例:{dede:php} $ro ...
- jquery.transform
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- android中与Adapter相关的控件----Spinner&AutoCompleteTextView
Spinner(列表选项框) & AutoCompleteTextView(自动完成文本框) 一.列表选项框核心属性 android:dropDownHorizontalOffset设置列表框 ...
- Elasticsearch之pythonAPI简单使用
elasticsearch自动补全建议功能 数据入库操作 ESmapping要求 PUT music { "mappings": { "_doc" : { &q ...
- Smpt命令顺序不正确。 服务器响应为: Error: need EHLO and AUTH first !
刚发现以前做的QQ邮箱发送邮件不能用了,查找了下原因:未加( EnableSsl SSL加密连接 )导致的,顿时觉得很坑,以前QQ邮箱也没有这个限制啊,可能是最近加的. 好吧不多说直接从头走起,照顾 ...
- 横竖屏切换，activity重建问题
最近有个需求,横屏直播A退出后返回直播列表页B(竖屏)时,在小米8上列表页B直接变成横屏的了,因为列表页B由竖屏切换成横屏了,还会重新执行生命周期onCreate()-onResume()等等. 为了 ...
- Google的新一代一致性哈希算法
先看到了一篇中文文章:谷歌退出有界负载的一致性哈希算法 然后找到了它对应的英文原文 以及它的英文paper,24页 又找到一篇博客,发现已经有人将它在haproxy上实现了,haproxy1.7.5上 ...