1. v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model)
复制代码
1<标签 v-model.修饰符="vue数据变量"> </标签>
2.v-for 列表渲染, 所在标签结构, 按照数据数量, 循环生成
复制代码
1<标签 v-for"(值, 索引或者属性名) in (目标结构)" :key="唯一值"> </标签>
3.v-show 显示内容(同angular中的ng-show 如果vue变量的值为true，就可见，否则就不可见)
复制代码
1<标签 v-show="vue变量" > </标签>
4.v-hide 隐藏内容 (同angular中的ng-hide)
复制代码
1<标签 v-hide="vue变量"> </标签>
5.v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false 如果vue变量的值为true，就可见，否则就不可见)
复制代码
1
2
3
4<标签 v-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else> </标签>
6.v-else-if 必须和v-if 连用
复制代码
1
2
3
4<标签 v-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else> </标签>
7.v-else 必须和v-if 连用,不能单独使用 否则报错 模板编译错误
复制代码
1
2
3
4<标签 v-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else> </标签>
8.v-bind 动态绑定 作用:及时对页面的数据进行更改
复制代码
1
2
3<标签 v-bind:属性名1="值1" v-bind:属性名2="值2"> </标签> // 简写, 省略v-bind <标签 :属性名1="值1" :属性名2="值2"> </标签>
9.v-on:click 给标签绑定事件,可以缩写为@,例如绑定一个点击事件,事件处理函数必须写在methods中
复制代码
1
2
3<标签 v-on:事件名="要执行的少量代码" > <标签 v-on:事件名="methods中的函数" > <标签 v-on:事件名="methods中的函数(实参)">
10.v-text 解析文本
复制代码
1<标签 v-text="vue数据变量"> </标签>
11.v-html 解析html标签
复制代码
1<标签 v-html="vue数据变量"> </标签>
12.v-bind:class 用v-bind给标签class设置动态的值
复制代码
1
2<标签 :class="变量" /> <标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />
13.v-bind:style 给标签动态设置style的值
复制代码
1<标签 :style="{css属性名: 值}" />
14.v-once 进入界面时 只渲染一次 不在进行渲染
复制代码
1<标签 v-once> </标签>
15.v-clock 防止闪烁
复制代码
1<标签 v-cloak> </标签>
16.v-pre 把标签内部的元素原位输出
复制代码
1<标签 v-pre> </标签>
最后
以上就是烂漫煎饼最近收集整理的关于Vue常用的指令都有哪些?的全部内容，更多相关Vue常用内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复