Vue常见的指令

Vue.js 提供了许多内置指令，这些指令可以在模板中用于处理元素的显示、行为等。以下是 Vue.js 中常见的 7 个指令及其详细代码示例：

1、v-bind：用于属性绑定，可以动态更新 HTML 属性。

html<template>
<div>
<img v-bind:src="imageSrc" alt="My Image">
</div>
</template><script>
export default {
data() {
return {
imageSrc: 'https://example.com/my-image.jpg'
}
}
}
</script>

2、v-model：用于在表单元素上创建双向数据绑定。

html<template>
<div>
<input v-model="message" placeholder="Enter some text...">
<p>Message is: {{ message }}</p>
</div>
</template><script>
export default {
data() {
return {
message: ''
}
}
}
</script>

3、v-if、v-else-if、v-else：用于条件渲染。

html<template>
<div>
<p v-if="score > 90">Excellent</p>
<p v-else-if="score > 60">Pass</p>
<p v-else>Fail</p>
</div>
</template><script>
export default {
data() {
return {
score: 85
}
}
}
</script>

4、v-for：用于列表渲染。

html<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template><script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>

5、v-show：根据表达式的值来显示或隐藏元素。

html<template>
<div>
<p v-show="isVisible">This is visible</p>
</div>
</template><script>
export default {
data() {
return {
isVisible: true
}
}
}
</script>

6、v-on：用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。可以简写为 @。

html<template>
<div>
<button v-on:click="incrementCount">Click me</button>
<p>Count: {{ count }}</p>
</div>
</template><script>
export default {
data() {
return {
count: 0
}
},
methods: {
incrementCount() {
this.count++
}
}
}</script>

7、v-text 和 v-html：用于更新元素的文本内容和 HTML 内容。

html<template>
<div>
<p v-text="message"></p>
<div v-html="htmlMessage"></div>
</div>
</template><script>
export default {
data() {
return {
message: 'Hello Vue!',
htmlMessage: '<strong>Hello</strong> <em>Vue</em>!'
}
}
}
</script>

这些指令是 Vue.js 中最常用的，它们可以帮助你创建动态和交互式的网页应用。