Vue 指令总结

指令(directive)

v-bind

<[标签类型] v-bind:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] :[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />

v-on

<[标签类型] v-on:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] @[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />

v-if / v-else-if / v-else

<[标签类型] v-if:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] v-else-if:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] v-else />

v-ifv-else-ifv-else 用于指示某个元素是否渲染。

注意:三者必须紧跟在一起。

v-for

<[标签类型] v-for="(item, index) in [data 或 methods 成员,类型为数组]" />

v-for 用于渲染列表数据(重复标签)。item 是数组索引,index 是数组项目的索引。

需要注意的是, v-for 定义在列表成员(item)上而非列表(list)上。

表达式

属性中

<[标签类型] [Vue 指令]="JavaScript 表达式,变量均为 data 或 methods 的成员"></[标签类型]>

内容中

<[标签类型]>
  {{[JavaScript 表达式,变量均为 data 或 methods 的成员]}}
</[标签类型]>

参考资料

https://vuejs.org/v2/guide/

https://cn.vuejs.org/v2/guide/

    原文作者:Zack
    原文地址: https://segmentfault.com/a/1190000019830430
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞