vue 计算属性和侦听器的使用小结
更新时间：2021年01月25日 09:30:23 作者：gzhjj
这篇文章主要介绍了vue 计算属性和侦听器的使用小结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
1. 计算属性和侦听器
1.1 计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
/*
// 相当于
reversedMessage: {
get(){
return this.message.split('').reverse().join('')
}
}
*/
}
});
</script>
</body>
</html>
解释：我们在属性computed中定义了计算属性reversedMessage，这里提供的函数将作为计算属性reversedMessage的getter函数。
1.2 setter
计算属性默认只有getter，不过我们可以提供一个setter。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<input type="text" v-model="reversedMessage" />
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
computed: {
reversedMessage: {
get(){
return this.message.split('').reverse().join('')
},
set(value){
this.message = value.split('').reverse().join('')
}
}
}
});
</script>
</body>
</html>
1.3 缓存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<p>{{ reversedMessage1() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
reversedMessage1: function(){
return this.message.split('').reverse().join('')
}
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
</body>
</html>
注意：虽然通过计算属性和方法，都可以达到同样的效果，但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
1.4 侦听属性
通过Vue实例的watch属性可以侦听数据的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverse=!reverse">反转</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue',
reverse: false
},
watch: {
// message: function(newVal, oldVal){
reverse: function(newVal){
console.log(newVal)
this.message = this.message.split('').reverse().join('')
}
},
});
</script>
</body>
</html>
我们可以通过实例属性vm.$watch达到同样的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverse=!reverse">反转</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue',
reverse: false
}
});
// vm.$watch('reverse', function (newVal, oldVal) {
vm.$watch('reverse', function (newVal) {
console.log(newVal)
this.message = this.message.split('').reverse().join('')
});
</script>
</body>
</html>
以上就是vue 计算属性和侦听器的使用小结的详细内容，更多关于vue 计算属性和侦听器的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了浅谈Vue服务端渲染框架Nuxt的那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了element 实现导航栏收起展开功能，实现思路先给 el-menu加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起，需要的朋友可以参考下2023-01-01
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于vue中常见的问题及解决方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
本文主要介绍了vue2实现传送门效果的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了修改Vue项目运行的IP和端口的方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-02-02
这篇文章给大家介绍了vue3中form对象无法赋值的问题解决,有时候对象的值死活赋不上值,这时候可以看下赋值的对象变量名是否和页面组件中的ref相同,文中给出了代码示例供大家参考,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-02-02
最新评论