在教材上看到
<button v-on:click="alert('Hello World!');">点击看看</button>这个语句，但实际自己操作的时候发现运行不了，会报错找不到alert函数，找了很多方法：安装vue插件什么的,发现还是不行。估计v-on：click里面就是没有这个函数。解决方法有几种如下：
第一种--将alert函数写在方法体内：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="vue.js" ></script>
<div id="myApp">
<p>{{message}}</p>
<button v-on:click="alert">alert</button>
</div>
<script>
var myData = {
message:'Hello Vue.js'
}
var app = new Vue({
el:'#myApp',
data:myData,
methods:{
alert:function(){
alert("1");
}
}
})
</script>
</body>
</html>第二种--不使用v-on：click直接使用onclick：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="vue.js" ></script>
<div id="myApp">
<p>{{message}}</p>
<button onclick="alert('1')">alert</button>
</div>
<script>
var myData = {
message:'Hello Vue.js'
}
var app = new Vue({
el:'#myApp',
data:myData,
})
</script>
</body>
</html>
第三种--使用@onclick的话也是一样的需要将alert写在方法体内：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="vue.js" ></script>
<div id="myApp">
<p>{{message}}</p>
<button @click="alert">alert</button>
</div>
<script>
var myData = {
message:'Hello Vue.js'
}
var app = new Vue({
el:'#myApp',
data:myData,
methods:{
alert:function(){
alert("1");
}
}
})
</script>
</body>
</html>特别注意：
使用v-on：click以及@click等等的前提是创建了vue对象并挂靠成功。
有误请指出。
版权声明：本文为liangshiyun1原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。