计算属性Computed
- 计算属性：相当于可以完成代码计算的变量。（自动更新，并返回计算结果）
- 编写步骤：
- 步骤1：声明计算属性：（编写逻辑代码），在computed中声明
- 步骤1：声明计算属性：（编写逻辑代码），在computed中声明
computed: {
//属性名() { return 返回值 }
total() {
return 0
}
},【Vue.js入门到精通|基于Vue Computed Watch Filter知识点小案例（购物车）】步骤2：使用计算属性：与普通变量相同的
{{total}}案例：将字符串反转（倒排），“ABC” --> "CBA"
{{'ABC'.split('').reverse().join('')}}{{msg}}案例2：data、methods、computed对比，‘显示姓名，2个文本框，一个是姓，一个是名’
fullName : {{fullName}}
fullName2 :{{fullName2}}
过滤器
- 过滤器：是对已有数据的二次加工
- 声明过滤器 (data/methods平级)
filter: {
过滤器名称(已有数据) {
return 处理结果
}}- 使用过滤器
{{变量 | 过滤器}}语法2：有参
- 声明过滤器 (data/methods平级)
filter: {
过滤器名称(已有数据, 变量1,变量2,... ) {
return 处理结果
}
}使用过滤器
{{变量 | 过滤器(参数1,参数2,...) }}案例 案例1：固定2位小数位数
{{num | parseNum }}案例2：指定小数位数
{{num | parseNum(1) }}监听器
- 监听器：当数据发生改变时，监听器可以出发对应的事件。
data() {
return {
变量：1
}
},
watch: {
变量() {//data.变量的监听处理函数}
}语法2：深度监听
data() {
return {
对象变量：{
属性1: 值,
属性2: 值,
}
}
},
watch: {
对象变量: {
handler() {},//处理函数
deep: true//深度监听，属性值发生变化时，也可以监听
}
}案例
- 监听普通变量和对象变量
msg:
username: 案例：购物车 需求
文章图片
实现
- 步骤：
- 步骤1：页面显示（Cart.vue、路由、路径 /cart）
- 步骤2：展示数据（模拟商品list、v-for展示）、（复选框、价格、时间、总价）
- 步骤1：页面显示（Cart.vue、路由、路径 /cart）
编号
标题
价格
数量
日期
小计
{{product.pid}}
{{product.title}}
{{product.price}}
-
{{product.count}}
+
{{product.createDate}}
{{product.price * product.count}}
总计：
案例：计算总计
computed: {
//属性名() { return 返回值 }
total() {
let sum = 0 ;
this.productList.forEach(product => {
// 小计的和
sum += (product.price * product.count)
});
return sum
}
},推荐阅读
- Vue.js入门到精通|最常见的需求基于Vue的批量删除你会嘛
- Vue.js入门到精通|2022年Vue最常见的面试题以及填空题（面试必问）
- Vue.js入门到精通|最新【vue】使用vue-cli5.0快速搭建一个项目
- Java毕业设计项目实战篇|Java项目:在线点餐系统(java+Springboot+Maven+mybatis+Vue+mysql+Redis)
- 实用工具|Mockjs模拟接口实现增删改查、分页、多条件查询
- Vue双向绑定原理及实现|Vue双向绑定原理及实现
- Vue|vue-property-decorator用法详解
- vue.js|has no exported member
- vue watch监听触发防抖节流