计算属性
文章发布较早,内容可能过时,阅读注意甄别。
# 姓名案例-插值语法实现
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>姓名案例-插值语法实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="firstName" /><br /><br />
名:<input type="text" v-model="lastName" /><br /><br />
全名: <span>{{firstName}}-{{lastName}} </span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 姓名案例-methods 实现
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>姓名案例-methods实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="firstName" /><br /><br />
名:<input type="text" v-model="lastName" /><br /><br />
全名:<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
methods: {
fullName() {
console.log("@---fullName");
return this.firstName + "-" + this.lastName;
},
},
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 姓名案例-计算属性实现
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>姓名案例-计算属性实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="firstName" /><br /><br />
名:<input type="text" v-model="lastName" /><br /><br />
全名:<span>{{fullName}}</span>
<!-- 全名:<span>{{fullName}}</span>
全名:<span>{{fullName}}</span>
全名:<span>{{fullName}}</span> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
computed: {
fullName: {
// get有什么作用? 当有人读取fullName时,get会被调用,且返回值就作为fullName的值
// get什么时候被调用? 1. 初次读取fullName时 2.所以来的数据发生变化时
get() {
console.log("get 被调用了");
return this.firstName + "-" + this.lastName;
},
// set设么时候被调用? 当fullNmae被修改时。
set(value) {
console.log("set", value);
const arr = value.split("-");
this.firstName = arr[0];
this.lastName = arr[1];
},
},
},
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# 笔记
计算属性:
- 定义:
要用的属性不存在,要通过已有属性计算得来。
- 原理:底层借助了
Objcet.defineproperty
方法提供的getter
和setter
。 - get 函数什么时候执行?
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
- 优势:与 methods 实现相比,内部有缓存机制(复用),效率更高,调试方便。
- 备注:
- 计算属性最终会出现在 vm 上,直接读取使用即可。
- 如果计算属性要被修改,那必须写 set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变。
# 姓名案例-计算属性简写
# 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>姓名案例-计算属性简写</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="firstName" /><br /><br />
名:<input type="text" v-model="lastName" /><br /><br />
全名:<span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 禁用提示
new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
computed: {
fullName() {
// 直接写,默认是get
console.log("get 被调用了");
return this.firstName + "-" + this.lastName;
},
},
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
上次更新: 2024/06/13, 22:13:45