vue计算属性详解——小白速会

最新推荐文章于 2024-08-13 17:30:16 发布

@阿猫阿狗~

最新推荐文章于 2024-08-13 17:30:16 发布

阅读量145

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_25741071/article/details/120869044

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>商品数量：{{count}} 个</h1>
    <h1>商品单价：{{unitPrice}} 元</h1>
    <h1>商品总价：{{totalPrice()}} 元</h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: 10,
  	unitPrice: 24
  },
  methods: {
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  }
})
</script>
</html>

在这里插入图片描述
https://www.cnblogs.com/chaixiaozhi/p/8688820.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{{reverseTitle}}</div>
    <div>{{reverseTitle1()}}</div>
    <button @click="add()">补充货物1</button>
    <div>总价为：{{price}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      title: '我是Title',
      firstName: 'Foo',
      lastName: 'Bar',
      package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
      reverseTitle: function () {
        return this.title.split('').reverse().join('')
        //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
      price: function () {
        return this.package1.count * this.package1.price + this.package2.count * this.package2.price
      }
    },
    methods: {   //对象的方法
      add: function () {
        this.package1.count++
      },
      reverseTitle1: function () {
        return this.title.split('').reverse().join('')
        //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
      }
    }
  })
</script>

</html>