vue一些常用指令

指令

指令（Directive），换句话说就是元素的自定义属性，在 Vue 中是以 v- 为前缀的自定义属性，属性值为对象或 js 表达式

指令	类型	用法
v-text	string	<span v-text="msg">span> <span>{{msg}}span>
v-html	string	<div v-html="html">div>
v-show	boolean	<div v-show="show">div>
v-if	boolean	<div v-if="status">div>
v-else-if	boolean	<div v-if="flag == 1">1div> <div v-else-if="flag == 2">2div>
v-else	不需要表达式	<div v-if="flag == 1">1div> <div v-else-if="flag == 2">2div> <div v-else>2div>
v-for	Array | Object | Number | String	<div v-for="(value, index) in data"> <span v-text="value">span> <span>{{index}}span> div> <div v-for="value in data"> <span v-text="value">span> div> <div v-for="(value, index) in data"> <span v-text="value">span> <span>{{index}}span> div> <div v-for="value in data"> <span v-text="value">span> div> <div v-for="(value, key) in data"> <span v-text="key">span> <span>{{value}}span> div> <div v-for="value in data"> <span v-text="value">span> div> <div v-for="(obj, index) in data"> <span v-text="JSON.stringify(obj)">span> <span>{{index}}span> div> <div v-for="obj in data"> <span v-text="JSON.stringify(obj)">span> div>
v-on	Function	<button v-on:click="say1">say1button> <button @click="say2('调用了 say2', $event)">say2button>
v-bind	Object	<img v-bind:src="'imgs/red.jpg'" /> <img :src="'imgs/yellow.jpg'" />
v-model	表单元素的值	<input type="text" v-model="mess"/>
v-pre	不需要表达式	<span v-pre>{{mess}}span>
v-cloak	不需要表达式	<span v-cloak>{{mess}}span>
v-once	不需要表达式	<span v-once>{{mess}}span>