Vue3-计算属性关键词

时间2024-05-08 17:06:03发布访客分类HTML浏览75

导读：Vue3 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 {{ message.split('' .reverse( .join('' }...

Vue3 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1

{ { message.split('').reverse().join('') } }

实例 1 中模板变的很复杂起来，也不容易看懂理解。接下来我们看看使用了计算属性的实例：实例 2 Vue 测试实例 - 菜鸟教程(runoob.com)

原始字符串: { { message } }

计算后反转字符串: { { reversedMessage } }

const app = { data() { return { message: 'RUNOOB!!' } } , computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app') 实例 2 中声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处： Vue3-计算属性关键词
本文地址： https://pptw.com/jishu/655646.html

Vue3-Prop的作用 Vue3-type 的原生构造器