2024年Web前端最新vue指令使用问题，上海蚂蚁金服面试流程

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

指令

============================================================

v-text

作用：更新元素的内容

注意点：v-text会填充整个innerhtml

{{msg}}

---

v-html

作用：通过 v-html 可以让内容作为 html 进行解析

注意点：为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的

---

v-show

作用：根据表达式的具体值(true与false)，改变该元素的display样式

适用于 : 数据的改变比较频繁的

---

v-if

作用：根据表达式的具体值(true与false)，改变的是元素的结构（渲染或者删除）

适用于 : 数据的改变不频繁的

v-else-if

注意点：前一兄弟元素必须有 v-if 或者 v-else-if

v-else

注意点：前一兄弟元素必须有 v-if 或者 v-else-if

上述三个可以链式调用

我是v-if，我是对的就显示我

我是v-else-if,我是对的就显示我

我是v-else,上边都错误就显示我

---

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

注意点：of 与 in 在这里没有区别

• {{user.id}} – {{user.name}}

• 索引值:{{index}}

  属性名：{{name}}，值：{{val}}

  拓展 :key

  作用：起绑定作用

  一般应用较少，举个场景

• {{user.id}} – {{user.name}}

  浏览器反馈

  

  这是我们选中第二个框后，在控制台输入以下代码

  app.users.sort((a,b)=>{

  return Math.random() - .5;

  })

  浏览器反馈

  

  我们可以看到，虽然张三、李四、王五位置变了，但是Input框的位置并没有变化

  这是因为vue在处理的时候，先把数据传递到VDOM中，处理完成后，有变化的就重新渲染响应，没变化的就保持不变，所以这个input的位置没变。

  处理方式也比较简单，我们把这个input所在的li和张三、李四、王五做一个绑定，让他们在发生改变时重新渲染li就可以了

• {{user.id}} – {{user.name}}

  浏览器反馈

  

  现在就解决了我们刚才所说的那个问题了

  ---

  v-bind

  绑定数据（表达式）到指定的属性上，<div v-bind:参数=“值/表达式”>，这里的参数就是指定的属性名称

  简写就是

  针对样式属性，v-bind值有一些特殊的写法

  style

  v-bind写法

  对象写法

  数组写法

  ---

  数据流

  数据流用来形容走向

  举例说明

  1. v-bind 单向数据绑定——数据到视图

  2. v-model 双向数据绑定——数据到视图，视图到数据

  代码示例

  学习分享，共勉

  题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

  

  x’,

  background: ‘green’

  }

  },

  style2: {

  border: ‘1px solid black’

  }

  });

  ---

  数据流

  数据流用来形容走向

  举例说明

  1. v-bind 单向数据绑定——数据到视图

  2. v-model 双向数据绑定——数据到视图，视图到数据

  代码示例

  学习分享，共勉

  题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

  [外链图片转存中…(img-rbX7UZf6-1715492032529)]