两周掌握Vue3：Vue基本代码构成、Vue3指令详解
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
<template>
<div>
<h1>Vue3 指令详解</h1>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
<p>{{ message }}</p>
<p v-if="seen">现在你看到我了</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue3!',
seen: true
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
}
</script>这个例子展示了Vue3中如何使用模板语法、事件处理、条件渲染等基本特性。v-on:click是一个指令，用于监听点击事件；v-if是条件渲染的另一个指令，用于根据表达式的值的真假来有条件地渲染元素。这个例子简单直观地展示了Vue3的基本用法。
评论已关闭