computed 計算屬性【選項】
computed 屬性會基于它所依賴的數(shù)據(jù)進行緩存
每個 computed 屬性摩窃，只有在它所依賴的數(shù)據(jù)發(fā)生變化時享郊，才會重新取值；
也就是說當(dāng)它所依賴的數(shù)據(jù)沒有發(fā)生改變的的時候谷醉，再次訪問立即返回上次的計算結(jié)果操骡，而沒有重新計算
methods 方法選項
methods每次調(diào)用的時候都會執(zhí)行
也就是說只要調(diào)用methods中的方法乞榨，那么此方法就是再次重新執(zhí)行
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">{{result}}
<br />
<input type="text" v-model.number="a"/><br>
<br />
<input type="text" v-model.number="b"/><br>
<div id="">
{{c}}
</div>
<div id="">
{{remsg}}
</div>
<input type="text" v-model="remsg">
<div id="">
{{remsg2}}
</div>
<div id="">
{{reverseMsg()}}
</div>
<p><label>姓：</label><input type="text" v-model='firstName'></p>
<p><label>名：</label><input type="text" v-model='lastName'></p>
<p>你的姓名是: {{ fullName }}</p>
<p>你的姓名是: {{ fullName }}</p>
<p>{{getFullName}}</p>
<p>{{now}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<p>{{now}}</p>
<p>{{now2()}}</p>
<p>{{now2()}}</p>
<br>
<br>
<br>
<br>
<!--html代碼-->
<div id="">
{{time}}
</div>
<div id="">
{{time2}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
a: 1,
b: 2,
c: '',
msg: "格萊科技",
firstName: '',
lastName: '',
fullName: '',
time: '',
time2: ''
},
//計算選項【屬性】
computed: {
now: function(){
setInterval(() => {
this.time2 = this.now
}, 500);
return Date.now()
},
getFullName: function(){
// this.fullName = this.firstName+this.lastName X
return this.firstName+this.lastName
},
result: function(){
return this.a+this.b;
},
// remsg: function(){
// return this.msg.split("").reverse().join("")
// },
remsg: {
get: function(){
return this.msg+"1111";
},
//val === get方法得到的值
set: function(val){
this.msg = val+"222";
}
},
remsg2: function(){
return this.remsg;
}
},
methods: {
now2: function(){
console.log(Date.now()+"aa")
setInterval(() => {
this.time = this.now2()
}, 500);
return Date.now()
},
reverseMsg () {
return this.msg.split("").reverse().join("")
}
},
// 監(jiān)聽選項[屬性]
watch: {
a: function(newVal, oldVal){
console.log(
newVal,
oldVal);
this.c = newVal + this.b;
},
// firstName: function (val) {
// this.fullName = val + ' ' + this.lastName
// },
// lastName: function (val) {
// this.fullName = this.firstName + ' ' + val
// }
}
});
</script>
</body>
</html>
案例效果：
time2會一直不變化
time會一直變化
vue入門學(xué)習(xí)視頻 10元
聯(lián)系方式QQ：1718202383
vue入門學(xué)習(xí)視頻.png
vue影院視頻+源碼 10元
聯(lián)系方式QQ：1718202383
image.png
