一、监听属性watch
1、 使用这个属性可以监听data中指定数据的变化,然后触发这个watch对应的function函数:
<template>
<div>
<input type="text" v-model="firstName" /> +
<input type="text" v-model="lastName" /> =
<input type="text" v-model="fullName" />
</div>
</template>
<script>
export default {
data() {
return {
firstName: "",
lastName: "",
fullName: " "
};
},
props: ["title"],
methods: {},
watch: {
//使用这个属性可以监听data中指定数据的变化,然后触发这个watch对应的function函数
firstName: function(newVal, oldVal) {
// this.fullName = this.firstName + '_' + this.lastName
//此时的this.firstName可以用newVal代替
this.fullName = newVal + "_" + this.lastName;
},
lastName: function(newVal) {
this.fullName = this.firstName + "_" + newVal;
}
}
};
</script>
2、监听路由
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
watch: {
'$route.path': function (newVal, oldVal) {
// console.log(newVal + '----' + oldVal);
if (newVal === '/register') {
console.log('欢迎来到注册页面');
} else if (newVal === '/login') {
console.log('欢迎来到登录页面');
}
},
}
})
二、计算属性computed
computed中定义的属性,就是计算属性,实质就是个方法且需要有返回值,使用时当做属性来使用,不用加小括号。
<template>
<div>
<input type="text" v-model="firstName" /> +
<input type="text" v-model="lastName" /> =
<input type="text" v-model="fullName" />
</div>
</template>
<script>
export default {
data() {
return {
firstName: "",
lastName: ""
//data中的fullName去掉
};
},
props: ["title"],
methods: {},
computed: {
//computed中定义的属性,就是计算属性,实质就是个方法且需要有返回值,使用时当做属性来使用,不用加小括号
// 只要计算属性中任意一个data数据发生变化,就会立即重新计算这个值
fullName: function() {
return this.firstName + "_" + this.lastName;
}
}
};
</script>