首页 / 知识

Vue3-计算属性关键词

2023-04-11 13:14:00

Vue3 计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

实例 1

</div>

实例 1 中模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

实例 2

<!DOCTYPE html>

<html>

<head>

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>

<body>

<p>原始字符串: {{ message }}</p>

<p>计算后反转字符串: {{ reversedMessage }}</p>

</div>

const app = {

data() {

return {

message: 'RUNOOB!!'

}

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

Vue.createApp(app).mount('#app')

</script>

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。