vue--计算属性

最新推荐文章于 2022-04-24 18:18:11 发布

weixin_44889992

最新推荐文章于 2022-04-24 18:18:11 发布

阅读量96

点赞数

分类专栏： vue 文章标签： vue--计算属性

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89389632

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

计算属性

为什么要有计算属性？
1. 直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服
2. 方法运行 // 但是语义性不高
计算属性是什么？

计算属性是new Vue(options) options中的一个配置项，用computed表示，它的值是一个对象
计算属性的值中存放的是方法

computed vs methods

同：都是函数，都可以书写逻辑
异： methods中的方法运行依赖于事件或是方法调用举例 @click = eventFnName {{ eventFnName() }}
但是computed的方法名可以直接当做变量一样用，类似于直接在data中定义的数据

项目中如果发现以下两个特点，就是用计算属性

有逻辑
使用类似变量

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<p>
{{msg}}
</p>
<p>
{{reverseHanlder()}}
</p>
<p>
{{ this.msg.split('').reverse().join('')}}
</p>
<p>
{{reverseMsg}}
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: ' zhangjun xihuan paojiao he huanglvse '
},
methods: {
reverseHanlder() {
return this.msg.split('').reverse().join('')
}
},
computed: {
reverseMsg() {
return this.msg.split('').reverse().join('')
}
}
})
</script>
</html>