Question

我尝试在静态HTML文件中创建Vue中的点击事件作为测试，但它没有按预期工作。请参阅以下完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE]><![endif]-->
<!--Empty IE conditional comment to improve site performance-->
<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<script type="text/babel">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>

</body>
</html>

所以作为核对清单：

我在方法对象中有我的功能
功能名称正确
我包括图书馆
在我的脚本标记中，我将babel指定为类型

它没有用，有什么不对？

Answer 1

这有效

<html lang="en">

<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<a id="filter" v-on:click="clickEvent" href="#">CLICK ME</a>
<script type="text/javascript">
var titleFilter = new Vue({
  el: '#filter',
  methods: {
    clickEvent: function(){
        console.log('Vue is working.');
    }
  }
});
</script>
</body>
</html>

将text / babel更改为text / javascript并将您的JS代码移到

下面

vueJS点击事件无效

1 个答案: