vue的常用指令

101 阅读2分钟

1. v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能。

image.png

2. v-text

v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样

以下两种写法效果一样

image.png

3. v-html

帮助我们绑定一些包含html代码的数据在视图上,比如:“hello,vue”,会解析html代码
否则会被当做字符串来处理

image.png

4. v-show

v-show 指令的取值为true/false,分别对应着显示/隐藏它就是用来控制元素的display css属
性的[display:none], 适用于频繁切换显示/隐藏

image.png

5. v-pre

会将html源码输出,不会解析渲染 效果等同于

image.png

6. v-if

设置为true的标签,成功渲染出来,而设置为false的标签,直接被一行注释代替了,并没有
被解析渲染出来。

v-show 和 v-if 两者的区别
如果需要频繁切换显示/隐藏的,就用 v-show ;
如果运行后不太可能切换显示/隐藏的,就用 v-if 。

image.png

v-else

两个标签:第一个使用 v-if 指令,并取值为false,第二个使用 v-esle指令,一旦第一个标签的
v-if 指令的值为true,被忽视的就是第二个

标签了。v-if 和 v-else 只有一个会被渲染出来。

image.png

v-else-if
用法同js原生中的if…elseif…elseif…else

7. v-cloak

数据延迟的时候将代码隐藏,不输出代码

image.png

8. v-for 遍历数组/对象

遍历数组

image.png

遍历对象

image.png

9. v-bind 绑定属性

image.png

绑定数组

image.png

绑定对象

image.png

10. v-on绑定事件 简写:@

image.png

v-on 修饰符
stop: 阻止事件冒泡
prevent 阻止浏览器默认行为
enter 按下enter键才会触发
once: 只触发一次回调

image.png

11. v-model 数据绑定

在文本框中输入什么 底下内容就是什么

image.png

v-model 修饰符
lazy 失去焦点后触发
.number 如果想自动将用户的输入值转为数值类型,可以将v-model添加number修饰符
.trim 如果要自动过滤用户输入的首尾空格字符,可以给v-model添加trim修饰符