在Vue 3中，指令是一种特殊的标记，以v-开头，用于在模板中表达“响应式”的DOM操作。Vue 3提供了许多内置指令，例如v-if，v-for，v-bind，v-on等。
以下是一些常用Vue 3指令的详细解释和示例代码：
v-if：条件性地渲染元素。如果表达式为假，元素会被移除。
<template>
<div>
<p v-if="show">现在你看到我了</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const show = ref(true); // 可以改为 false 试试看
return { show };
}
}
</script>
v-else-if：v-if的else-if块。可以链式的多次使用。
<template>
<div>
<p v-if="type === 'apple'">苹果</p>
<p v-else-if="type === 'banana'">香蕉</p>
<p v-else>未知水果</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const type = ref('apple'); // 可以尝试改变这个值，看看结果如何
return { type };
}
}
</script>
v-else：v-if的else块。必须紧跟v-if或v-else-if。v-show：根据表达式的真假，切换元素的display CSS属性。
<template>
<div>
<p v-show="show">我会被显示</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const show = ref(true); // 可以改为 false 试试看
return { show };
}
}
</script>
v-for：基于源数据多次渲染元素或模板块。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref(['苹果', '香蕉', '樱桃']);
return { items };
}
}
</script>
v-bind：绑定一个或多个属性值到表达式。简写为一个冒号 :。
<template>
<div>
<img v-bind:src="imageSrc" />
<!-- 简写 -->
<img :src="imageSrc" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const imageSrc = ref('https://example.com/image.png');
return { imageSrc };
}
}
</script>
v-on：监听DOM事件。简写为@符号。
<template>
<div>
<button v-on:click="greet">点击我</button>
<!-- 简写 -->
<button @click="greet">点击我</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
function greet() {
alert('Hello!');
}
return { greet };
}
}