计算属性与侦听器

计算属性：computed
侦听器（监听器）：watch

1.计算属性

data属性和computed属性定义的值都可以绑定在表达式中。如果某些值需要通过计算才能得到，那可以使用计算属性。多个值的改变，为了得到一个结果，使用计算属性。

绑定在表达式中

<template>
  <div>
   <h1>计算属性与监听器</h1>
    <p>{{title}}</p>
    <p>{{massage}}</p>
  </div>

</template>
<script>
    export default {
      data(){
        return{
          title:'hello world'
        }
      },
      computed:{
        massage(){
          return"hello body"
        }
      }
    }
</script>

<style scoped>

</style>

png

计算总计

<template>
  <div>
   <h1>计算属性与监听器</h1>
    <p>计算总价=数量*单价*折扣</p>
    <p>单价：{{price}}</p>
    <p>
      <button @click="sub">-</button>
      {{quality}}
      <button @click="add">+</button>
    </p>
    <p>折扣：{{discount}}</p>
    <p>总价：{{num}}</p>
  </div>

</template>
<script>
    export default {
      data(){
        return{
          price:"20",  //单价
          quality:0,  //数量
          discount:0.7   //折扣
        }
      },
      computed:{
        num(){
          return this.price * this.quality * this.discount;
        }
      },
      methods:{
        sub(){
          if(this.quality>0){
            this.quality--
          }
        },
        add(){
            this.quality++
        }
      }
    }
</script>

<style scoped>

</style>

运行结果

png

2.侦听器

一个值变化，会影响多个值（或处理多件事），使用侦听器。

<template>
  <div>
   <h1>计算属性与监听器</h1>
    <p>计算总价=数量*单价*折扣</p>
    <p>单价：{{price}}</p>
    <p>
      <button @click="sub">-</button>
      {{quality}}
      <button @click="add">+</button>
    </p>
    <p>折扣：{{discount}}</p>
    <p>总价：{{num}}</p>
  </div>

</template>
<script>
    export default {
      data(){
        return{
          price:"20",  //单价
          quality:0,  //数量
          discount:0.7,   //折扣
          num :0,  //总价
        }
      }, 
watch:{
        quality(val){
           this.num=this.price * val * this.discount;  //数量变成val值
        }
      },
      methods:{
        sub(){
          if(this.quality>0){
            this.quality--
          }
        },
        add(){
            this.quality++
        }
      }
    }
</script>

<style scoped>

</style>

png