一、计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
- 使用计算属性反转字符串
<div id='app'>
<p>原始字符串 {
{
msg}}</p>
<p>计算后的字符串 {
{
reverseMsg}}</p>
</div>
var vm = new Vue({
el: '#app',
data:{
msg:'Hello world!'
},
computed:{
// 计算属性的 getter
reverseMsg: function(){
// `this` 指向 vm 实例
return this.msg.split('').reverse().join('')
}
}
})
计算属性 reversedMsg。
提供的函数将用作属性 vm.reverseMsg 的 getter 。
vm.reverseMsg 依赖于 vm.msg,在 vm.msg 发生改变时,vm.reverseMsg 也会更新。
computed
和methods
的比较
- 可以使用 methods 来替代 computed,效果上两个都是一样的。
- 但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
- 而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
- 使用 computed 在调用时不同加
()
,而使用 methods 在调用时需要加()
<div id='app'>
<p>原始字符串: {
{
message }}</p>
<p>计算后反转字符串: {
{
reversedMessage }}</p>
<p>计算后反转字符串: {
{
reversedMessage }}</p>
<p>使用方法后反转字符串: {
{
reversedMessage2() }}</p>
<p>使用方法后反转字符串: {
{
reversedMessage2() }}</p>
</div>
var cnt=1;
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
}
})
二、监听属性
可以通过 watch
来响应数据的变化。
- 通过
watch
实现计数器
<div id='app'>
<p>计数器: {
{
counter }}</p>
<button @click = "counter++">点我</button>
</div>
var vm = new Vue({
el: '#app',
data: {
counter: 1
},
watch:{
counter: function(nval, oval){
alert(oval + '变为' + nval)
}
}
})
千米
和米
之间的换算
<div id='app'>
千米:<input type="text" v-model = 'kilometers'>
米:<input type="text" v-model = 'meters'>
</div>
var vm = new Vue({
el: '#app',
data: {
kilometers: 0,
meters: 0
},
watch:{
kilometers: function(val){
this.kilometers = val
this.meters = this.kilometers * 1000
},
meters: function(val){
this.kilometers = val / 1000
this.meters = val
}
}
})
- 以上代码中创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。
- watch 对象创建了 data 对象的两个监控方法: kilometers 和 meters。
- 当在输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
不积跬步无以至千里 不积小流无以成江海