04-vue的计算属性复杂操作computed

最新推荐文章于 2024-06-05 10:59:26 发布

无味无感

最新推荐文章于 2024-06-05 10:59:26 发布

阅读量488

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/qq_41863998/article/details/117731841

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.vue的计算属性复杂操作

computed用来做复杂的运算,因为computed计算属性会进行缓存，计算属性只会调用一次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
</head>
<body>
<div id="app">
  <h1>总价格:{{totalPrices}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue ({
    el: '#app',
    data: {
      message: "张三爱李白",
      movies:[
        {id: 1001, moviesName: '海贼王', Price: 98},
        {id: 1002, moviesName: '七龙珠', Price: 73},
        {id: 1003, moviesName: '犬夜叉', Price: 82}
      ]
    },
    computed:{
      totalPrices: function () {
        var then = this
        let result = 0
        for (let i = 0;then.movies.length; i++) {
          result = then.movies[i].Price
        }
        return result
      }
    }
  })
</script>

</body>
</html>

2.Vue动态属性的setter和getter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    {{shouName}}
    {{fullName}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue ({
      el:'#app',
      data:{
        firtName:'李白',
        lastName:'苏轼'
      },
      computed:{
        shouName:function (){
          return this. firtName+' '+this.lastName
        },
        fullName:{
          set:function (newValue) {
            const names = newValue.split(' ')
            this. firtName=names[0]
            this.lastName=names[1]
            console.log(this. firtName+' '+this.lastName)
          },
          get:function () {
            return this. firtName+' '+this.lastName
          }
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

3.computed的优势

通过定义methods方法展示数据时，多次调用会出现重复调用调用；牺牲了性能
通过定义computed定义的计算属性多次调用时，展示数据的时候不会多次调用了；这是因为vue给computed设计了缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--1.直接拼接：语法过于繁琐，后期不好维护-->
    <h2>{{firtName}} {{lastName}}</h2>
    <!--2.通过定义methods方法-->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <!--通过定义computed计算属性-->
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue ({
      el:'#app',
      data:{
        firtName:'李白',
        lastName:'苏轼'
      },
      computed:{
        fullName: function (){
          console.log('fullName')
          return this. firtName+' '+this.lastName
        }
      },
      methods:{
        getfullName: function () {
          console.log('getfullName')
          return this. firtName+' '+this.lastName
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

无味无感

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04-vue的计算属性复杂操作computed

vue的计算属性复杂操作computed用来做复杂的运算,因为computed计算属性会进行缓存，计算属性只会调用一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$Title$</title></head><body><div id="app"> <h1>总价格:{{t
复制链接

扫一扫