在Vue中,常用的指令有v-bind、v-on、v-for、v-if、v-show等。自定义指令可以通过Vue.directive()方法来创建。
下面是常用指令和自定义指令的代码示例:
- v-bind:用于动态绑定HTML属性
<div v-bind:class="{'active': isActive}"></div>
- v-on:用于监听DOM事件
<button v-on:click="onClick">Click me</button>
- v-for:用于循环渲染列表
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
- v-if:用于条件渲染
<div v-if="show">This will be rendered if show is true</div>
- v-show:用于根据条件展示或隐藏元素
<div v-show="show">This will be displayed if show is true</div>
自定义指令的代码示例:
Vue.directive('highlight', {bind: function (el, binding) {el.style.backgroundColor = binding.value;}
});<div v-highlight="'yellow'">This will have yellow background color</div>
以上代码示例中,v-highlight是自定义的指令,它会将元素的背景颜色设置为指令的参数值。