2024年最新计算属性 + Vue2 、Vue3 wacth + 过滤器，2024年最新阿里4轮面试

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

工作场景：例如：在页面使用vuex中的数据，如果在data中使用,修改了vuex的数据data不会改变重新渲染,建议在computed:{ }中使用,使用computed当依赖值发生改变就会重新渲染，修改vuex数据，页面也可以及时渲染了

结论是从一次次实验中得到，如有更新、或语法错误，跪求指错，我不怕错，非圣贤孰无过、就怕没人告诉你

• 计算属性函数写法

========

​

{{formateMsg}}

{{formateMsg}}

{{formateMsg}}

{{formateMsg}}

<button @click=“changeMsg”>点击修改msg

​

对象写法

---

第二种写法 对象写法 使用了这种方法我们需要手动给计算属性添加set方法 之后我们就可以直接给计算属性赋值

具体步骤：

1、先定义好数据

2、在get函数中将定义的数据return出去

**3、**在set函数中有一个形参  形参就是事件赋的值 可以将形参赋值给定义的数据

4、就可以直接赋值了

商品价格— {{sumPrice}}

<button @click=“changePrice”>修改商品价格

计算属性完

• ----------------------------------------------------------------------------------------------------------------------

过滤器开始

---

注意：过滤器 filter 过滤器在vue3中被移除了 功能需要使用计算属性代替

全局过滤器

---

全局过滤商品价格：

在main.js中写 所有价格保留小数两位  在需要的地方写 {{ 需要过滤的数据 |  全局过滤器名字}}

Vue.filter(‘formatePrice’, (val) => {

   //console.log(val) // 过滤的数据

return val.toFixed(2)

})

在页面使用：  // formatePrice 是main.js定义的过滤器名

{{item.price |　formatePrice}}

效果：所有价格保留小数两位

全局过滤时间：

Vue.filter(‘formatePrice’, (val) => {

//console.log(val) // 过滤的数据

// return val.toFixed(2)

const dt = new Date(val)

const y = dt.getFullYear()

const m = (dt.getMonth() + 1 + '').padStart(2, '0')

const d = (dt.getDate() + '').padStart(2, '0')

const hh = (dt.getHours() + '').padStart(2, '0')

const mm = (dt.getMinutes() + '').padStart(2, '0')

const ss = (dt.getSeconds() + '').padStart(2, '0')

    // yyyy-mm-dd hh:mm:ss

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

})

使用： {{要过滤的数据 | 过滤器名字}}

格式：

局部过滤器

=====

• 局部过滤器 过滤器可以串联使用 I 下一个过滤器名 | 下一个过滤器名

• //局部过滤器格式: {{要过滤的数据| 过滤器名字}}

  订单日期:{{item.time | formateTime}}

  //函数格式:花括号里写函数 过滤的数据作为实参

  订单日期:{{changeTime(item.time)}}

  学习笔记

  主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  HTML/CSS

  **HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

  **CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

  

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  

  float，定位position，浏览器默认样式

  [外链图片转存中…(img-O3O8Yc1c-1715759135987)]

  HTML5 /CSS3

  **HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

  **CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

  [外链图片转存中…(img-2otrTATF-1715759135988)]

  JavaScript

  **JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  [外链图片转存中…(img-OWpKfNhH-1715759135989)]