一些比较经常使用的Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。当表达式的值改变时,将其产生的连带影响,响应式地做用于 DOM。html

v-once:数据改变时,插值处的内容不会更新。url

v-html=“abc”:指令中的标签内容会被替换成为属性值 abc ,直接做为HTMLspa

v-bind 指令能够用于响应式地更新 HTML attribute。code

完整 v-bind:href='url'htm

缩写 :href='url'blog

动态参数的缩写 :[key]='url'索引

v-on 指令,它用于监听 DOM 事件事件

完整 v-on:click='doSome'字符串

缩写 @click='doSome'it

动态参数的缩写 @[event]='doSome'

 

v-if v-else v-else-if:条件渲染

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,不然它将不会被识别。

v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 `display

v-if VS v-show

v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。所以,若是须要很是频繁地切换,则使用 v-show 较好;若是在运行时条件不多改变,则使用 v-if 较好。

 

v-for 列表渲染

v-for="(value, name, index) in object"

第一个参数为value(键值),第二个参数为key(键名),第三个参数做为索引

key请用字符串或数值类型的值

<div v-for="item in items" v-bind:key="item.id">   
    <!-- 内容 --> 
</div>
相关文章
相关标签/搜索