摘要：计算属性计算属性关键词。计算属性在处理一些复杂逻辑时是很有用的。接下来我们看看使用了计算属性的实例实例原始字符串计算后反转字符串计算属性的指向实例尝试一下实例中声明了一个计算属性。提供的函数将用作属性的。依赖于，在发生改变时，也会更新。
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
尝试一下 »
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：
实例 2
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
尝试一下 »
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
实例 3
methods: {
reversedMessage2: function () {
return this.message.split("").reverse().join("")
}
}
尝试一下 »
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
实例 4
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("
");
document.write("url: " + vm.url);
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/22995.html
摘要：自定义多级右键菜单实现效果自定义多级右键菜单第五课第六题中已经通过事件实现了一级右键菜单，所以这题只要在上面再添加事件唤出子菜单即可。 0x1完美拖拽 实现效果：6-01完美拖动 这里没有使用h5的拖动，毕竟原题也是考察借助鼠标事件实现自定义的拖动，所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api，当然由于做这个系列题目使用的都是es5的语法，所以IE8往下就兼容不...
摘要：标签的认识一标签的分类双标签如单标签如换行标签二标签的关系嵌套关系如与父子关系并列关系如与兄弟关系三排版标签标题标签比较重要，一般用作网站的段落标签水平线标签单标签换行标签标签网页布局标亲盒子四文本格式化标签文本加粗标签不推荐使用的加粗标HTML标签的认识一、标签的分类1、双标签 如 2、单标签 如 换行标签 二、标签的关系1、嵌套关系 如 与title 父子关系2、并列关系如与 兄弟关系...
摘要：边界也会忽略百分比宽度设置。背景裁剪，值有改变盒子计算值只是不包含和只包含内容高度今天是一个跨天的任务，学习目标是：掌握CSS盒模型及Float； 盒模型要点： 如果盒子的高度被设置为百分比长度，那么盒子高度不会遵循这个设置了的百分比长度，而是总会采用盒子内容的高度，除非给它设置了一个绝对高度（例如，像素或者 em）。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。 边界...
阅读 2508·2021-11-25 09:43
阅读 1803·2021-09-22 15:26
阅读 3493·2019-08-30 15:56
阅读 1656·2019-08-30 15:55
阅读 1840·2019-08-30 15:54
阅读 750·2019-08-30 15:52
阅读 3073·2019-08-29 16:23
阅读 837·2019-08-29 12:43
