学习计算属性前，先用插值语法和methods实现，最后和计算属性进行一个对比
实现姓名案例
1.姓名案例-插值语法实现
<div id="root">
姓：<input type="text" v-model="firstname"><br><br>
名：<input type="text" v-model="lastname"><br><br>
<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
</div>
<script>
//创建Vue实例
new Vue({
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
firstname: '张',
lastname: '三',
}
})
</script>
2.姓名案例-methods实现
<div id="root">
姓：<input type="text" v-model="firstname"><br><br>
名：<input type="text" v-model="lastname"><br><br>
<!-- 没有缓存被调用3次 -->
<span>{{fullname()}}</span><br><br>
<span>{{fullname()}}</span><br><br>
<span>{{fullname()}}</span>
</div>
<script>
//创建Vue实例
new Vue({
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
firstname: '张',
lastname: '三',
},
methods: {
fullname() {
console.log(this)
return this.firstname + '-' + this.lastname
}
}
})
</script>
3.姓名案例-计算属性实现
<div id="root">
姓：<input type="text" v-model="firstname"><br><br>
名：<input type="text" v-model="lastname"><br><br>
测试：<input type="text" v-model="x"><br><br>
<!-- 有缓存被调用1次 -->
<span>{{fullname}}</span><br><br>
<span>{{fullname}}</span><br><br>
<span>{{fullname}}</span><br><br>
<span>{{fullname}}</span>
</div>
<script>
//创建Vue实例
const vm = new Vue({
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
firstname: '张',
lastname: '三',
x: '你好'
},
computed: {
fullname: {
// get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
//get什么时候调用？1.初次读取fullname时。2.所依赖的数据发生变化时。
get() {
console.log('被调用了')
console.log(this)//此处的this是vm
return this.firstname + '-' + this.lastname
},
//set什么时候调用？当fullname被修改时
set(value) {
console.log('set', value)
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
4.姓名案例-计算属性简写
<div id="root">
姓：<input type="text" v-model="firstname"><br><br>
名：<input type="text" v-model="lastname"><br><br>
<span>{{fullname}}</span>
</div>
<script>
//创建Vue实例
const vm = new Vue({
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
firstname: '张',
lastname: '三'
},
computed: {
// 完整写法
// fullname: {
// // get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
// //get什么时候调用？1.初次读取fullname时。2.所依赖的数据发生变化时。
// get() {
// console.log('被调用了')
// console.log(this)//此处的this是vm
// return this.firstname + '-' + this.lastname
// },
// //set什么时候调用？当fullname被修改时
// set(value) {
// console.log('set', value)
// const arr = value.split('-')
// this.firstname = arr[0]
// this.lastname = arr[1]
// }
// }
//简写（只读不改才能用）
fullname() {
console.log('被调用了')
return this.firstname + '-' + this.lastname
}
}
})
</script>
