vue中的计算属性实例详解
更新时间：2018年09月19日 09:08:26 作者：Cherish丶任逗逗
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。接下来通过本文给大家介绍vue中的计算属性,需要的朋友可以参考下
什么是计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。
计算属性（computed）用于处理复杂逻辑
computed：{
}
computed做为vue的选项是固定的
例子：
<div id="itany">
<p>{{mes}}</p>
<p>{{count}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
mes:'hello vue'
},
computed:{
count:function(){
//切割 翻转 拼接
return this.mes.split(' ').reverse().join('---')
}
}
})
</script>
输出结果为：
hello vue
vue---hello
练习
要求：点击button按钮使数字以对应的价格改变
Image 2.png
代码如下：
<div id="itany">
<button v-on:click="num">总和</button>
<p>{{arr}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
name:{price:2,count:0},
names:{price:4,count:0},
see:true
},
methods:{
num:function(){
this.name.count++,
this.names.count++
}
},
computed:{
arr:function(){
return this.name.price*this.name.count+this.names.price*this.names.count
}
}
})
</script>
相关文章
这篇文章主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue3系统进入页面前的权限判断和重定向方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文给大家分享如何使用vue3实现文章目录功能，特色功能主要是自动高亮选中当前正在阅读的章节，自动展开当前正在阅读的章节的子标题，并隐藏其他章节的子标题，代码简单易懂，感兴趣的朋友跟随小编一起看看吧2022-03-03
最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了Vue ElementUI table实现表格斜线分隔线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
国际化就是指在一个项目中，项目中的语言可以进行切换（中英文切换），那么在实际项目中是如何实现的呢，本文就给大家详细的介绍实现方法,需要的朋友可以参考下2023-07-07
Axios提供了简单而强大的API来处理HTTP请求,而FormData提供了用于构建表单数据的API,这篇文章主要介绍了Vue中如何使用Axios发送FormData请求,需要的朋友可以参考下2024-07-07
viewer.js是一款开源的图片预览插件,功能十分强大,本文主要介绍了vue3中使用viewerjs实现图片预览效果的项目实践,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。这篇文章主要介绍了ztree在vue项目中使用并且带有搜索功能,需要的朋友可以参考下2018-08-08
最新评论