- <div id="box">
- {{mytext}}
- div>
- <script>
- var vm = new Vue({
- el:"#box",
- data:{
- mytext:"啦啦啦"
- }
- })
- script>
结果:
但是如果我们想打印一个值,但是这个值是需要通过逻辑计算的值,虽然“{{}}”大括号里面也能放表达式,但是如果这个表达式很复杂,我们放在里面,就会显得dom部分很复杂,复杂代码应该是放在Vue中的,这样就会显得头重脚轻,所以我们引入了一个“计算属性”的概念;
代码:
- <div id="box">
- {{ myComputedName }}
- div>
- <script>
- new Vue({
- el:"#box",
- data:{
- myname:"yiyi"
- },
- computed:{
- myComputedName(){
- return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
- }
- }
- })
- script>
结果:
问题所在:
那为什么不用函数呢,之前这个{{}}里面放着的是函数的格式: 例如:{{ test() }},然后这个函数在methods里面定义;
不用函数的原因是当我们重复调用函数,比如调用了三次,函数就会老老实实执行三次;
而计算属性会缓存,下次再调用就会复用上一次的结果,只有当代码中的值改变了,它才会重新执行一遍;
图示:
计算属性调用三次:
结果:
但是函数会,看下图函数多次调用:
- <div id="box">
- {{ myMethodsdName() }}
- {{ myMethodsdName() }}
- {{ myMethodsdName() }}
- div>
- <script>
- new Vue({
- el:"#box",
- data:{
- myname:"yiyi"
- },
- methods:{
- myMethodsdName(){
- console.log("myMethodsdName执行")
- }
- },
- })
- script>
结果:
总结:
- 计算属性(防止模板过重,难以维护),负责逻辑放在计算属性中来写;
- 计算属性有缓存,基于依赖的缓存;
- 但是有一个缺点:计算属性里放的是同步代码,需要立即得到结果,像ajax这种异步代码用计算属性,就不行
计算属性的缺点:
- <div id="box">
-
- <ul>
- <li v-for="item in datalist" :key="item.id">
- <img :src="item.img | imgFilter1 | imgFilter2"/>
- li>
- ul>
- div>
- <script>
- Vue.filter("imgFilter1",(url)=>{
- return url.replace("w.h/",'')
- })
- Vue.filter("imgFilter2",(url)=>{
- return url+'@1l_1e_1c_128w_180h'
- })
- new Vue({
- el:"#box",
- data:{
-
- },
- })
- script>
注意:
这个过滤器只有Vue-2支持,Vue3就不支持过滤器了;