Vue中内部指令,教你一一使用

1、v-on 用与监听DOM事件;

  例如:v-on:click  v-on:submit (可简写为@click 、@submit)

2、v-bind 响应并更新DOM,向DOM上绑定属性

  例如:v-bind:class、v-bind:src (可简写为:class、:src)

3、v-model 用于双休数据绑定

  例如:<input  v-model="message"  type = "text"/>

4、v-show 条件渲染指令,再DOM中改变样式display,实现隐现

  例如 <div v-show = "true">实现隐现</div>

5、v-if 条件渲染指令,删除或添加DOM实现隐现

  例如 <div v-if = "true">实现隐现</div>

6、v-e1se 条件渲染指令,必须跟v-if搭配使用

  例如 <div v-if = "show==1">show=1时显示</div>

    <div v-else>show≠1时显示</div>

7、v-e1se-if 条件渲染指令,必须跟v-if搭配使用

    <div v-if = "show==1">show=1时显示</div>

    <div v-else-if = "show==2">show=2时显示</div>

    <div v-else>show≠1or2时显示</div>

    ps:三者必须紧紧在一起不能有其他标签元素在它们之间

8、v-html 更新元素的innerHTML

9、v-text更新元素的textContent

10、v-for 循环指令

   例如<ul><li v-for = "(item,index ) in list"></li><ul>

11、v-cloak 不需要表达式,保持在元素上知道关联实例结束编译

12、v-once 不需要表达式,只渲染员元素或组件一次,后面如果再调用直接从缓存中获取,提高性能

13、v-pre 不需要表达式,跳过这个元素的编译,加快整个项目的编译速度

  例如<p v-pre>不需要编译</p>

猜你喜欢

转载自www.cnblogs.com/songfengyang/p/12484589.html