|
|
@@ -15,7 +15,7 @@
|
|
|
名：<input type="text" v-model="liName">
|
|
|
</p>
|
|
|
|
|
|
- <p @click="getName()">姓名是: {{myName}}</p>
|
|
|
+ <p>姓名是: {{myName}}</p>
|
|
|
</div>
|
|
|
<p>名字是:{{firstName + lastName}}</p>
|
|
|
<p>我们的名字是:{{ getFullName() }}</p>
|
|
|
@@ -58,49 +58,42 @@
|
|
|
myName:{
|
|
|
// 走的是getter 实际get方法
|
|
|
get(){
|
|
|
- console.log(this.newName,'获取1');
|
|
|
- console.log(this.liName,'获取2');
|
|
|
return this.newName + '-' + this.liName;
|
|
|
},
|
|
|
- set(value) {
|
|
|
- console.log(value,'获取set值');
|
|
|
- const arr = value.split('-');
|
|
|
- this.newName = arr[1];
|
|
|
- this.liName = arr[0];
|
|
|
- console.log("set设置")
|
|
|
+ set() {
|
|
|
+ this.newName = "天气";
|
|
|
+ this.liName = "真好";
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- watch:{
|
|
|
- // 初次进入页面 并不监听 发生更改才会开启监听
|
|
|
- newName(newValue,oldValue) {
|
|
|
- this.full = newValue + this.liName;
|
|
|
- },
|
|
|
- liName(newValue,oldValue) {
|
|
|
- this.full = this.newName + newValue;
|
|
|
- },
|
|
|
- // 如果我们想 初始化页面进行监听
|
|
|
- // 补充知识点
|
|
|
- // newValue: {
|
|
|
- // // 开启监听 ， 深度监听
|
|
|
- // immediate:true,
|
|
|
- // deep: true,
|
|
|
- // handler() {
|
|
|
- // }
|
|
|
- // }
|
|
|
- },
|
|
|
+ // watch:{
|
|
|
+ // // 初次进入页面 并不监听 发生更改才会开启监听
|
|
|
+ // newName(newValue,oldValue) {
|
|
|
+ // this.full = newValue + this.liName;
|
|
|
+ // },
|
|
|
+ // liName(newValue,oldValue) {
|
|
|
+ // this.full = this.newName + newValue;
|
|
|
+ // },
|
|
|
+ // // 如果我们想 初始化页面进行监听
|
|
|
+ // // 补充知识点
|
|
|
+ // // newName: {
|
|
|
+ // // // 开启监听 ， 深度监听
|
|
|
+ // // immediate:true,
|
|
|
+ // // deep: true,
|
|
|
+ // // handler() {
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
+ // },
|
|
|
// 自定义的方法
|
|
|
methods: {
|
|
|
getFullName() {
|
|
|
// this => Vue实例
|
|
|
return this.firstName + this.lastName + this.full;
|
|
|
- },
|
|
|
- getName() {
|
|
|
- console.log(this.newName);
|
|
|
- console.log(this.liName);
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
+ // 解决set失效问题
|
|
|
+ vm.myName = '';
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
e