vue常用指令

文章目录 1.v-html2.v-show和v-if3.v-else和v-else-if4.v-on5.v-bind6.v-for7.v-model

---

1.v-html

在Vue中v-html相当于原生js的innerHTML，在data里面设置msg为一个html元素，例如<p>Vue</p>，在容器中使用v-html="msg"就可以将html元素插入到选择的容器中

2.v-show和v-if

v-show的原理是通过切换css的display：none来控制元素的显示隐藏 v-if的原理是通过条件来判断是否渲染元素

在频繁切换的时候使用v-show，不频繁切换是使用v-if

3.v-else和v-else-if

v-else不能单独使用，需要配合v-if的使用，相当于条件判断if，else和if，else if，else。 v-else多用于两者间的判断来渲染，v-else-if多用于多条件判断的渲染

4.v-on

用于注册事件，语法为v-on：click=‘函数’，表示给某个元素添加了点击事件，用函数实现点击后需要实现的操作，相当于@click=‘’

5.v-bind

v-bind可以简写为：，动态设置src，tittle等属性，语法是v-bind:属性名=‘表达式’

6.v-for

v-for可以遍历数组，对象等，语法为v-for=“(item,index) in 数组”，表示遍历数组中，item代表每一项，index代表数组下标（可以省略），在通过v-for循环时，需要添加:key作为唯一标识，便于列表项的正确排序复用

7.v-model

给表单元素使用，实现双向数据绑定（数据变化——>视图自动更新，视图变化——>数据自动更新） v-model=“变量”，通常用于用户名密码等表单元素的双向绑定