为啥@click 不适用于 vue js 中的 h1 标签
Posted
技术标签:
【中文标题】为啥@click 不适用于 vue js 中的 h1 标签【英文标题】：Why @click is not working on h1 tag in vue js为什么@click 不适用于 vue js 中的 h1 标签 【发布时间】：2022-01-21 00:51:17 【问题描述】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue js 01</title>
</head>
<body>
<div >
<h1 id="message" @click="update">message</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
let app = Vue.createApp(
data()
return
message:'hai welcome to vue 3!',
,
methods:
update()
this.message='Changed'
)
app.mount("#message")
</script>
</body>
</html>
为什么点击 h1 标签时这不起作用
当我单击此 h1 标签时，它不起作用。但如果它在 <div> 内，则可以将其 id 移至此 div
【问题讨论】：
【参考方案1】：我认为是因为格式错误
id 应该在父标签或包装器中，以便其子组件可以使用其选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue js 01</title>
</head>
<body>
<div id="message">
<h1 @click="update">message</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
let app = Vue.createApp(
data()
return
message: 'hai welcome to vue 3!',
,
methods:
update()
this.message = 'Changed'
)
app.mount("#message")
</script>
</body>
</html>【讨论】：
总是最好将您更改的内容和原因添加到答案中，而不是更改代码并让人们玩“Spot the Differences”。答案不仅仅是 OP。 你没有看到这个I think because of a formatting error在答案@HereticMonkey
好吧，想象一下你从谷歌那里得到了这个问题，寻找你的@click 不起作用的原因。你得到一个答案，它所说的只是“存在格式错误”。它没有告诉您该格式错误是什么，您必须逐行比较问题和答案之间的代码，以发现答案将 id 从h1 移动到父div。然而，回答者可能一开始就将其写入答案。如果回答者能解释为什么 h1 上的 id 不起作用，那就更好了...以上是关于为啥@click 不适用于 vue js 中的 h1 标签的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的过渡不适用于 Bootstrap-vue 中的警报 v-model？
带有 Vue CLI 3 的项目的导入路径上的 WebStorm 中的 Intellisense（代码完成辅助）不适用于 Vue.js