vue---methods和computed的区别
<p> </p>
<p>代码演示，打开控制台：</p>
<div id="app">
<div class="cnblogs_code">
<pre> <div id = "app">
<div>methods:{{sum()}}</div>
<div>computed:{{Sum}}</div>
<div>{{c}}</div>
<button @click="fn">点击跟新</button>
</div>
<script><span style="color: #000000;">
let vm </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> Vue({
el:</span>"#app"<span style="color: #000000;">,
data:{
message:</span>"你好吗"<span style="color: #000000;">,
a:</span>1<span style="color: #000000;">,
b:</span>2<span style="color: #000000;">,
c:</span>""<span style="color: #000000;">
},
methods:{
fn(){
</span><span style="color: #0000ff;">this</span>.c="跟新了与sum无关的视图"<span style="color: #000000;">,
console.log(</span>"点击了页面刷新试图了"<span style="color: #000000;">)
},
sum(){
console.log(</span>"methods中的sum被执行"<span style="color: #000000;">)
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.a +<span style="color: #0000ff;">this</span><span style="color: #000000;">.b
}
},
computed:{
Sum:{
get:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
console.log(</span>"cpmputed中的c"<span style="color: #000000;">)
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.a + <span style="color: #0000ff;">this</span><span style="color: #000000;">.b
},
}
}
})
</span></script>
</pre>
</div>
</div>
<script type="text/javascript">// <![CDATA[
let vm = new Vue({
el:"#app",
data:{
message:"你好吗",
a:1,
b:2,
c:""
},
methods:{
fn(){
this.c="跟新了与sum无关的视图",
console.log("点击了页面刷新试图了")
},
sum(){
console.log("methods中的sum被执行")
return this.a +this.b
}
},
computed:{
Sum:{
get:function(){
console.log("cpmputed中的c")
return this.a + this.b
},
}
}
})
// ]]></script>
更多精彩
