版权声明:如果觉的本文好的话,点个赞,您的鼓励是我最大的动力。 https://blog.csdn.net/boysky0015/article/details/82951327
<div id='app'>
{{ message.split('').reverse().join('') }
</div>
在这个地方模板不再是简单的声明式逻辑。这里是想要反转字符串message。当你想要在模板中多次引用此处的反转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,你都应当使用计算属性。
提问:
(1)当你想要在模板中多次引用此处的反转字符串时,就会难以处理。
看一下下面这两种写法的区别:
<1>第一种写法
<div id="app">
计算前的属性:{{ message }}
<div>
计算后的属性:{{ reversedMessage }}
</div>
</div>
var app = new Vue({
el: '#app',
data: {
message: '旁边有个小姐姐很漂亮'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
},
})
<2>第二种写法:
<div id="app">
计算前的属性:{{ message }}
<div>
计算后的属性:{{ reversedMessage() }}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '旁边有个小姐姐很漂亮'
},
methods: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
},
})
</script>
第一种写法用的是计算属性 computed,因此我的理解是调用时用属性的方式。
第二种写法用的是方法methods,因此我的理解是调用时用方法的方式。
computed和methods的区别:
computed是基于它们的依赖进行缓存的,只在相关依赖发生改变时才会重新求值。
而使用methods,在重新渲染的时候,函数总会重新调用执行。
computed setter
computed默认只有getter,不过需要时你可以使用setter。
<div id="app">
计算前的属性:{{ message }}
<div>
计算后的属性:{{ reversedMessage }}
</div>
<div>
{{ site }}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '旁边漂亮的女孩',
url: 'www.baidu.com',
message: '旁边有个小姐姐很漂亮'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
},
site: {
get: function() {
return this.name + ' ' + this.url;
},
set: function(newValue) {
let names = newValue.split(' ');
this.name = names[0];
this.url = names[names.length - 1]
}
}
},
})
//调用setter,app.name app.url 也会相应的更新。
app.site = '一定要有所作为 www.google.com';
document.write('name: '+ app.name );
document.write('<br />');
document.write('url: '+app.url);
</script>
提问:
(1)这个set有什么作用呢?
回答:可以改变app.site 的值。