版权声明:独学而无友,则孤陋寡闻。q群582951247 https://blog.csdn.net/mp624183768/article/details/87912356
- Computed无法携带参数 methods 可以
- 不确定每次都会功能都新,请用Computed
- 确定每次都会更新,就用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具有数据缓存的功能 不会重新渲染界面