16Vue - 计算属性(基础例子)
2023-09-11 14:15:43 时间
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这种情况下,模板不再简单和清晰。在实现反向显示 message 之前,你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。
这就是为什么任何复杂逻辑,你都应当使用计算属性。
基础例子
HTML:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
JS:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
结果:
Original message: “Hello”
Computed reversed message: “olleH”
这里我们声明了一个计算属性 reversedMessage
。我们提供的函数将用作属性vm.reversedMessage
的 getter 。
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
你可以打开浏览器的控制台,修改 vm 。 vm.reversedMessage
的值始终取决于 vm.message
的值。
你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage
依赖于 vm.message
,因此当 vm.message
发生改变时,依赖vm.reversedMessage
的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。
相关文章
- 判断对象属性的值是否空,如为空,删除该属性
- 第103章 属性关键字 - Inverse
- fastjson:SerializerFeature属性使用
- 微信小程序 - 父组件调用子组件的函数方法(像 Vue.js 中 ref 属性一样,直接 this.$refs.xx 获取子组件数据和方法)详细教程示例代码
- Vue - 计算属性
- 《Hack与HHVM权威指南》——1.3.3 属性
- 【Java】+反射1+获取属性/成员变量 的名称及类型
- C#开发Unity游戏教程之游戏对象的属性变量
- 【快应用】align-self属性设置不生效案例
- 【快应用】如何通过计算属性控制组件样式
- 《Ember.js实战》——2.3 计算属性
- vue从入门到进阶:计算属性computed与侦听器watch(三)
- Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等
- java 利用Class获取类的属性信息
- Qt编写自定义控件属性设计器
- swift 使用计算属性+结构管理内存
- React里table表格设置边框属性border="1"无效???
- vue基础---计算属性和侦听器
- grid布局之容器属性justify-content与align-content
- [js高手之路] dom常用节点属性兼容性详解与应用
- Vue计算属性和监听属性
- petite-vue源码剖析-属性绑定`v-bind`的工作原理
- 单元测试方法属性(Unit Test Method Attribute)
- SpringBoot获取全局配置文件的属性以及@ConfigurationProperties实现类型安全的配置