Vue常见简写 “:“ , “@“ , “#“
在Vue中,常用的简写主要包括以下几种:
:
(V-bind 缩写):用于绑定属性。例如,绑定一个元素的class和内容:
<!-- 完整写法 -->
<div v-bind:class="isActive ? 'active' : ''" ></div>
<!-- 简写形式 -->
<div :class="isActive ? 'active' : ''" ></div>
@
(V-on 缩写):用于绑定事件监听器。例如,绑定一个点击事件:
<!-- 完整写法 -->
<button v-on:click="doSomething"></button>
<!-- 简写形式 -->
<button @click="doSomething"></button>
#
(V-slot 缩写):用于指定插槽内容。例如,定义一个名为 "header" 的插槽:
<!-- 完整写法 -->
<current-component>
<template v-slot:header>
<!-- 头部内容 -->
</template>
</current-component>
<!-- 简写形式 -->
<current-component>
#header
<!-- 头部内容 -->
#
</current-component>
以上是Vue中常用的简写,它们可以使模板更加简洁,提高开发效率。
评论已关闭