zoukankan      html  css  js  c++  java
  • vue中computed计算属性

    1.computed计算属性,它表示根据已有属性,计算得到一个新的属性
    2.在computed里面写一个函数,这个函数很特殊,它的函数名,将来可以作为一个属性来使用
    3.计算属性是依赖于缓存的,当页面中调用同一个计算属性多次的时候,后面的计算属性的值,会直接从第一次得到的结果中去取,所以说,它的性能比较高,推荐使用计算属性⭐

    <!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>
          <span>单价:{{price}}----------数量:{{count}}</span>
          <button @click="count=count+1">增加</button>
          <button @click="reduce()">减少</button>
        </div>
        <p>总价:{{totalPrice}}</p>
        <p>总价(加运费):{{totalPrice2}}</p>
      </div>
      <script src="./lib/vue-2.4.0.js"></script>
      <script>
        let vm = new Vue({
          el:'#app',
          data:{
            price:20,
            count:0,
            yunfei:10
          },
          computed: {
            totalPrice(){
              return this.price * this.count;
            },
            totalPrice2(){
              // 注意,在computed中不能够使用异步函数
              // setTimeout(() => {
              //   return this.price * this.count + this.yunfei
              // }, 200);
              var totalprice = this.price * this.count + this.yunfei;
              if (this.count === 0) {
                totalprice = 0;
              }
              return totalprice;
            }
          },
          methods: {
            reduce(){
              this.count = this.count - 1;
              if (this.count<=0) {
                this.count = 0;
              }
            }
          }
        })
      </script>
    </body>
    </html>
    
  • 相关阅读:
    如何在iTerm2中配置oh my zsh?
    sublime中格式化jsx文件
    ES6 new syntax of Literal
    ES6 new syntax of Rest and Spread Operators
    How to preview html file in our browser at sublime text?
    ES6 new syntax of Default Function Parameters
    ES6 new syntax of Arrow Function
    七牛云2018春招笔试题
    Spring-使用注解开发(十二)
    Spring-声明式事物(十一)
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10509215.html
Copyright © 2011-2022 走看看