Vue 计算属性
这里结合 姓名案例 来理解 Vue 计算属性
三种方法实现：插值语法、methods、计算属性
插值语法_实现姓名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_插值语法实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fistName}}-{{lastName}}</span>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data() {
return{
fistName:'张',
lastName:'三'
}
}
})
</script>
</body>
</html>
插值语法：使用 v-model 双向数据绑定来实现姓名案例
methods_实现姓名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_methods实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三'
}
},
methods: {
fullName() {
// 此处 this 为 vm
return this.fistName + '-' + this.lastName
}
}
})
</script>
</body>
</html>
在 methods 中写一个 fullName 方法
methods 中 this 可以直接调用 data 中的属性
计算属性_实现姓名案例
定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了 Object.defineProperty() 方法提供的 getter 和 setter
优势：与 methods 实现相比，内部有缓存机制，效率更高，调试更方便
备注：计算属性最终会出现在 vm 上，直接读取使用即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_计算属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三'
}
},
computed: {
fullName: {
// 当 fullName 被读取时，get 会被调用，其返回值就作为 fullName 的值
// 此处 this 为 vm
get() {
return this.fistName + '-' + this.lastName
}
}
}
})
</script>
</body>
</html>
计算属性_实现姓名案例_简写形式
简写的条件：当属性只读不写时才可以简写，只有 getter 没有 setter 时才可以使用简写
示例
computed: {
fullName() {
return this.fistName + '-' + this.lastName
}
}
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术