Vue常用的指令都有哪些?

1. v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)

<标签 v-model.修饰符="vue数据变量">  </标签>

2.v-for  列表渲染, 所在标签结构, 按照数据数量, 循环生成

<标签 v-for"(值, 索引或者属性名) in (目标结构)" :key="唯一值">  </标签>

3.v-show 显示内容(同angular中的ng-show 如果vue变量的值为true，就可见，否则就不可见)

 <标签 v-show="vue变量" >  </标签>

4.v-hide 隐藏内容 (同angular中的ng-hide)

<标签 v-hide="vue变量">  </标签>

5.v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false 如果vue变量的值为true，就可见，否则就不可见)

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

6.v-else-if 必须和v-if 连用

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

7.v-else 必须和v-if 连用,不能单独使用 否则报错 模板编译错误

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

8.v-bind 动态绑定 作用:及时对页面的数据进行更改

<标签 v-bind:属性名1="值1" v-bind:属性名2="值2">  </标签>
// 简写, 省略v-bind
<标签 :属性名1="值1" :属性名2="值2">  </标签>

9.v-on:click 给标签绑定事件,可以缩写为@,例如绑定一个点击事件,事件处理函数必须写在methods中

<标签 v-on:事件名="要执行的少量代码" >
<标签 v-on:事件名="methods中的函数" >
<标签 v-on:事件名="methods中的函数(实参)">

10.v-text 解析文本

<标签 v-text="vue数据变量">  </标签>

11.v-html 解析html标签

<标签 v-html="vue数据变量">  </标签>

12.v-bind:class 用v-bind给标签class设置动态的值

<标签 :class="变量" />
<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />

13.v-bind:style 给标签动态设置style的值

<标签 :style="{css属性名: 值}" />

14.v-once 进入界面时 只渲染一次 不在进行渲染

<标签 v-once>  </标签> 

15.v-clock 防止闪烁

<标签 v-cloak>  </标签>

16.v-pre 把标签内部的元素原位输出

<标签 v-pre>  </标签>

最后

以上就是烂漫煎饼为你收集整理的Vue常用的指令都有哪些?的全部内容，希望文章能够帮你解决Vue常用的指令都有哪些?所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。