【前端面试】面试官：说说Vue中常见的指令
大家好，这里是前端营地，分享最新的前端知识和面试经验，欢迎评论区留言和投稿！
Vue指令是带有v-前缀的特殊属性，通过属性来操作元素
Vue常见指令：
v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等
1.v-show指令
控制元素显示
v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性
{{msg}}
2.v-if指令 v-else指令、v-else-if指令
根据表达式的真假值动态添加数据
v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。
说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用
v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数。比较简单，看看案例：
小明评级为：优秀
良好
及格
不及格
3.v-for指令
v-for可用来遍历数组、对象、字符串。
用法：v-for=“（循环变量，索引值）in 目标数据” ：key=“id”
{{att}}:{{val}}
{{index}}:{{val}}
{{astr}}
4.v-html，v-text 指令
内容渲染指令：
v-text 会覆盖标签内部原有的内容
｛｛｝｝差值表达式 可以解决v-text覆盖问题 在实际开发中使用最多。
v-html 可以把带有标签的字符串渲染成真正的html内容
v-text和v-html都是输出为文本
{{innerHtml}}
5.v-bind指令
如果给属性赋值，那么可以使用v-bind。是用于给标签内的属性赋值，在标签的属性中直接加双括号会被当作字符串。用法：<属性>="<变量>"
"{{innerHtml}}"
"{{innerHtml}}"
6.v-on指令
v-on用于事件绑定
语法: v-on:<事件类型>="<函数名>"
简写：@<事件类型>="<函数名>"
点击事件
点击事件
7.v-model指令
数据双向绑定指令，限制在 、