Vue中的常用指令

1、v-text

用来操作当前元素的textContext和innerText属性,会覆盖掉标签中原有的内容。

无法读取文本内的html标签,会当做文本原样输出。

2、v-html

用来操作当前元素的innerHTML文本内容,也会覆盖标签原有的内容。

可以读取文本中的html标签,并且解析显示在页面中。

3、v-if

用来显示和隐藏当前元素,值为true和false。

为true时,表示当前元素被销毁删除;

为false时,表示重新创建生成元素。

注:尽量避免使用,太多Dom的操作会消耗性能,不利于性能优化。

4、v-show

用于设置元素的显示个隐藏。

与v-if不同的是,v-show操作的是css的display属性,

值为true时,设置当前元素的display属性值为“block”,

值为false时,设置当前元素的display属性值为“none”。

5、v-for

用来遍历循环数据。

使用时需要添加一个唯一的key属性,通常使用id或者index。(:key=‘index’或者:key=‘item.id’)。

6、v-on

用来绑定事件。

函数必须写在methods中。

缩写形式:@, 例如,@click。

7、v-bind

用于给DOM元素动态绑定属性。

缩写形式:冒号,例如,:title=‘你好,世界 !’。

在绑定class或style特性时,支持其它类型的值,如数组或对象。也可以进行字符串拼接。代码示例如下:


8、v-model

表单元素上实现双向绑定。

data函数中返回对象用return。

9、 v-pre

设置了这条指令后,这个元素以及它的子元素上的所有内容将不会被解析执行。

10、v-once

设置了这条指令表示元素和组件只渲染一次。随后的重新渲染,元素或组件及其身上的所有子节点将被视为静态内容并跳过。可以用于优化更新性能。

11、.prevent

阻止事件默认行为。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1 41
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,623评论 0 11
  • 年前年后到现在,餐桌上一直是鸡鸭鱼肉,吃得毫无胃口,虽然也买了不少青菜,可是大棚温室里的豆角黄瓜都少了太多阳光的普...
    似曾相识a阅读 1,102评论 5 10