Vue学习笔记（3）关于Vue的计算属性

最新推荐文章于 2024-03-11 20:25:54 发布

MezereonXP

最新推荐文章于 2024-03-11 20:25:54 发布

阅读量2.9k

点赞数

分类专栏：网页前端 Vue 文章标签：数据解决方案 Vue 计算属性

本文链接：https://blog.csdn.net/qq_34206952/article/details/54342329

版权

网页前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。

Vue当然也是给出了解决方案，这就是计算属性，先给出代码

<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{reverseMessage}}</h2>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hi Vue!'
},
computed:{
reverseMessage:function(){
return this.message.split(' ').reverse().join('');
}
}
})
</script>
</html>

在此我们利用了计算属性来对message做一个整理转换，然后再展示于页面之中，这样在网页的编写之中就显得十分的清晰了。

步骤如下，在dom中使用文本插值，然后在Vue实例中添加computed选项，并为此添加reverseMessage的函数返回值，我们为其提供的函数作为reverseMessage的getter，Vue中的开发文档中对于getter的说明是干净无副作用的，我们可以放心地使用它。

当然上面的代码还有另外一种实现方式，就是利用method来实现

<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{reverseMessage()}}</h2>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hi Vue!'
},
methods:{
reverseMessage:function(){
return this.message.split(' ').reverse().join('');
}
}
})
</script>
</html>

代码如上，我们可以利用文本插值之中加入一个method来实现数据的处理

但是这两种方式是不一样的，method方法在每一次重新渲染都会重新计算一次，而使用计算属性的方法会对数据进行绑定，储存在缓存之中，除非数据发生变动。如果你不希望有缓存，你可以使用method。

接下来还要介绍一个监视属性 Watched property

他可以监视数据的变动

<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
The message is :<input type="text" v-model="message"></input>
<p>{{theReact}}</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'',
theReact:'',
},
watch:{
message:function(val,oldval){
this.theReact=val;
}
}
})
</script>
</html>

如代码所示，利用watch选项中的函数，我们可以实现对数据的监视，当其发生改变的时候就会调用相应的方法。这可以运用在一些异步访问之中。

到此，对于计算属性以及method，watch等应该有了一定的了解了。

MezereonXP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（3）关于Vue的计算属性

通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。Vue当然也是给出了解决方案，这就是计算属性，先给出代码Vue{{message}}{{reverseMessage}}var vm=new Vue
复制链接

扫一扫