vue v-on绑定事件采用内联形式的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定和事件绑定</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input v-model="msg">
<button onclick="alert('msg='+vm.msg)">点我看看1</button>
<button v-on:click="alert('msg='+this.msg)">点我看看2</button>
<button v-on:click="handleClick">点我看看3</button>
</div>
<script src="./libs/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:'Hello,How are you?'
},
methods:{
handleClick:function(){
alert('msg='+this.msg)
}
}
})
</script>
</body>
</html>
上面代码，只有这一句<button v-on:click="alert('msg='+this.msg)">点我看看2</button> 总是报错，不知道为什么？谢谢回答
慕婉清9541561浏览 1089回答 1
1回答
-
橋本奈奈未
这个报错是vue给你的一个提示，vue检测到你使用的alert函数并没有在实例中定义，你预期是希望它指向的是window.alert，但是vue并不能知道是不是因为你忘记定义了实例属性或方法，所以它给你一个错误提示，因为这可能会引起问题，如果你使用的是移除了错误提示和警告的压缩版的vue，比如vue.min.js，那么这段代码就可以执行了【前提是this.msg要改为msg，这里使用this是有问题的】，完整版的vue会做很多这样的错误提示，这是在帮助开发者规避一些意外错误。最好不要内联代码，还是定义一个方法去执行比较好。
随时随地看视频慕课网APP
相关分类
Vue.js