我试图通过使用v-if切换div可见性来创建一个“假”多页网站。然而，我遇到了两个问题：
首先，<a href="#" v-on:click="toggleText">click to toggle</a>被编译为<a href="#">click to toggle</a>。当使用div而不是href时也是一样，然后它就不能被点击了。
其次，即使我将div切换到按钮，我也会得到一个错误“showText is not defined”，但我在应用程序对象中将ShowText定义为一个React性属性？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Petite-Vue Example</title>
<style>
.hidden-text {
display: none;
}
</style>
</head>
<body>
<div id="app">
<button class="clickable" @click="toggleText">Click me!</button>
<div v-if="showText" class="hidden-text">Hidden text revealed!</div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'
const app = {
showText: false,
toggleText() {
this.showText = !this.showText;
}
};
createApp({
data() {
return app;
},
methods: {
toggleText: app.toggleText
}
}).mount('#app');
</script>
</body>
</html>任何指针将不胜感激！
1条答案
按热度按时间k5ifujac1#
事件处理程序不会出现在呈现的DOM HTML中，因为HTML规范中没有支持它们的内容，所以这是意料之中的。Vue特定的语法被剥离，并在为浏览器编译时转换为JavaScript。
你的问题是你正在使用普通的Vue Options API而petite-vue不支持。仔细阅读documentation和示例代码。您将看到没有
data()、methods等。选择您的应用程序应编写为：
jsfiddle
注意，我删除了div元素上的
hidden-text类，因为display: none总是隐藏文本，而不管v-if结果如何。