2024年04-VUE 常用指令最佳实践，意外的惊喜

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

new Vue({

el:“#app”,

data:{

color:“red”

}

});

v-show

---

v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：

<元素 v-show=“bool类型的变量或返回bool类型的js表达式”>

当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,

如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。

示例关键代码如下：

<button @click=“show”>show

<span class=“close” @click=“hide”>×

v-if 和 v-else

---

v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：

<元素1 v-if=“boolean类型的变量或js表达式”>

<元素2 v-else>

示例关键代码如下：

Welcome, dingding |

v-else-if

---

v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：

<元素1 v-if=“条件1”>

<元素2 v-else-if=“条件2”>

<元素3 v-else-if=“条件3”>

… …

<元素n v-else>

注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。

示例关键代码如下：

优秀

良好

及格

及格

v-for

---

v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：

<要反复生成的元素 v-for=“(当前元素值, 当前位置) of 数组”>

示例关键代码如下：

• {{i+1}} - {{t}}

  v-for还可以遍历对象属性，例如：

• {{key}} : {{value}}

  v-for 还可以进行计数，例如：
• {{i}}

• v-on

  ---

  v-on 是一个专门绑定事件处理函数的指令，其基本语法为：

  <元素 v-on:事件名=“事件处理函数名()”>

  v-on 也可以使用@符号代替，其基本语法结构为：

  <元素 @事件名="事件处理函数名()

  如果事件处理函数不需要传入实参值，则()也可省略,例如：

  <元素 @事件名=“事件处理函数名”>

  凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。

  示例关键代码如下：