Vue内置指令功能特性概述

2018年11月30日 Vue.js 1,578 views

Vue内置13个指令，码笔记分享Vue指令的功能特性概述：

Vue内置指令特性概述

Vue内置指令包括：v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-pre、v-cloak、v-once；

  • 1、v-text：更新元素的textContent；
    例如：

    <span v-text="msg"></span> 等同于 <span>{{msg}}</span>；
  • 2、v-html：更新元素的innerHTML；
  • 3、v-show：条件渲染指令，为DOM设置css的style属性
  • 4、v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
  • 5、v-else：条件渲染指令，必须跟v-if成对使用
  • 6、v-else-if：判断多层条件，必须跟v-if成对使用；
  • 7、v-for：循环指令；
    例如：

    <li v-for="(item,index) in todos"></li>
  • 8、v-on：用于监听DOM事件；
    例如：v-on:click v-on:keyup
  • 9、v-bind：响应并更新DOM特性；
    例如：v-bind:href v-bind:class v-bind:title v-bind:bb
  • 10、v-model：数据双向绑定；用于表单输入等；
    例如：

    <input v-model="message">
  • 11、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；
    例如：

    <span v-pre>{{ this will not be compiled }}</span>；
  • 12、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译；
  • 13、v-once：不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。

Vue内置指令详解

参考：Vue指令大全汇总及详解

2024年云服务器租用优惠价格，11月最新：