<style>
.changeList {
color: red;
}
</style>
<body>
<div id="app">
<h1> {{ fullName }} </h1>
<h2> {{ fullNameT }} </h2>
<h2> {{ fullNameT }} </h2>
<h2> {{ fullNameT }} </h2>
<h2> {{ fullNameT }} </h2>
<h2> {{ getFullName() }} </h2>
<h2> {{ getFullName() }} </h2>
<h2> {{ getFullName() }} </h2>
<h2> {{ getFullName() }} </h2>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: "李银河",
lastName: "你好呀"
},
computed: { // 计算属性里面有 set 和get 方法的 一般不用set方法来改变属性 只用 get方法只读属性
// get方法一般都是省略 直接像 fullName2一样写
fullName: {
// set: function(newValue) {
// console.log(newValue);
// const names = newValue.split(' ');
// this.firstName = names[0];
// this.lastName = names[1]
// },
get: function() {
return this.firstName + ' ' + this.lastName;
}
},
fullNameT: function() { // 用计算属性写 性能更高 因为它有缓存
console.log("fullNameT");
return this.firstName + ' ' + this.lastName;
}
},
methods: {
getFullName: function() {
console.log("getFullName"); // 打印4次 如果页面同时打印类似 上面的内容
// 在methods属性 里面写和计算属性一样的内容 性能低
return this.lastName + " " + this.firstName
}
}
})
</script>
</body>