当前位置：首页 > news >正文

Vue-计算属性

news 2025/5/19 5:51:08

计算属性

案例

输入姓、名，全名称=姓+名

在这里插入图片描述

实现

插值语法

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>计算属性与监视</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>计算属性与监视</h1><div>姓：<input type="text" v-model="firstName" /><br />名：<input type="text" v-model="lastName" /><br /><!-- 插值语法 -->全名称：<span>{{firstName}}{{lastName}}</span><br> </div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el: "#root",data: {firstName: "刘",lastName: "德华",}});</script>
</html>

效果

在这里插入图片描述

方法

代码

{{ fullName() }}: 方法必须携带括号

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>计算属性与监视</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>计算属性与监视</h1><div>姓：<input type="text" v-model="firstName" /><br />名：<input type="text" v-model="lastName" /><br /><!-- 插值语法 --><!-- 全名称：<span>{{firstName}}{{lastName}}</span><br> --><!-- 方法 : 必须携带括号 -->全名称：<span>{{ fullName() }}</span><br />全名称：<span>{{ fullName() }}</span><br /></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el: "#root",data: {firstName: "刘",lastName: "德华",},methods: {fullName() {console.log("调用fullname方法了")return this.firstName + this.lastName;},},});</script>
</html>

效果

在这里插入图片描述

发现多次调用，fullName 方法也被调用了多次

计算属性

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>计算属性与监视</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>计算属性与监视</h1><div>姓：<input type="text" v-model="firstName" /><br />名：<input type="text" v-model="lastName" /><br /><!-- 插值语法 --><!-- 全名称：<span>{{firstName}}{{lastName}}</span><br> --><!-- 方法 : 必须携带括号 --><!-- 全名称：<span>{{ fullName() }}</span><br /> --><!-- 全名称：<span>{{ fullName() }}</span><br /> --><!-- 计算属性  -->全名称：<span>{{ computedFullName }}</span><br />全名称：<span>{{ computedFullName }}</span><br /></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el: "#root",data: {firstName: "刘",lastName: "德华",},computed: {computedFullName: {get() {console.log("调用computedFullName get 了");return this.firstName + "-" + this.lastName;},set(value) {console.log("调用computedFullName set 了");const names = value.split("-")this.firstName = names[0]this.lastName = names[1]},},// 简写 ： 适用于只进行计算 不做修改的场景 // computedFullName() {//   console.log("调用computedFullName了");//   return this.firstName + this.lastName;// },},methods: {fullName() {console.log("调用fullname方法了");return this.firstName + this.lastName;},},});</script>
</html>

效果

在这里插入图片描述

发现多次调用，computedFullName 只调用了一次

总结

属性计算有多种方式实现 插值、方法、计算属性。

插值：适用于简单的拼接之类的。
方法：适用于复杂的运算封装称方法供使用
- 花括号中调用方法必须携带括号。如：{{fullName()}}
- 多次调用，均会触发方法进行对应的逻辑执行
计算属性：vue提供专用于属性计算的配置块
- 本质是对象的get、set实现的，最终绑定到vm
- 因此调用时只需要计算属性名称，不能携带括号
- 多次调用，只会触发一次计算逻辑，缓存机制
- 首次调用、依赖项变更 会触发计算逻辑即缓存更新