vue Computed与methods区别

版权声明:独学而无友,则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/87912356
  1.  Computed无法携带参数 methods 可以
  2.  不确定每次都会功能都新,请用Computed
  3.  确定每次都会更新,就用methods

Computed样例

h5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    现在时间 :{{now}}
    <br>
    路人A人体脂肪:<input type="text" v-model.number='a'>
    <br>
    路人B人体脂肪:<input type="text" v-model.number='b'>
    
    <ul>
      <li>谁的体脂肪比较重?:{{whoHeavey}}</li>
      <li>A跟一般的国人体脂肪差多少:{{judgeA}}</li>
    </ul>
    
    <h3>注意computed 不要和methods 使用同样的程序名字 会报错</h3>
    <ul>
      <li>{{judgeAA(1)}}</li>
    </ul>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

js

var app=new Vue({
  el:'#app',
  data:{
    a:0,
    b:0,
    BMI:20
  },
  computed:{
    now:function(){
      let total=this.a+this.b;
      var d= new Date();
      return d.getSeconds();
    },
    whoHeavey:function(){
     if(this.a>this.b){
       return "a比较重";
     }
        if(this.a<this.b){
       return "b比较重";
     }
        if(this.a==this.b){
       return "一样重";
     }
    },
    judgeA:function(){
      return this.a-this.BMI;
    }
  },
  methods:{
  judgeAA:function(num){
      return "a"+num;
    }
}
});

每次变化输入框的值的时候。现在时间也会跟着改变。

v-model.number:将字符串转换为数字

//let total=this.a+this.b;

这句话如果注释掉 每次变化输入框的值的时候。现在时间就会跟着改变

他是根据data里面的数据来的。 如果data没变,数据就不会改变

computed具有数据缓存的功能 不会重新渲染界面

猜你喜欢

转载自blog.csdn.net/mp624183768/article/details/87912356