怎么添加单击事件就报错啊？
生物怪兽
2018-07-28 08:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"></input>
<button @click="handlseSubmit">提交</button>
</div>
<ul><todo-item
v-for="(item,index) of list" :key="index" :content="item"></todo-item></ul>
</div>
<script>
Vue.component("todo-item",{
props:["content"],/*全局组件*/
template:"<li @click="handClick" >{{content}}</li>", /*这里只要添加单击事件就报错啊 button那个单击事件就没问题*/
methods:{
handClick:function(){
alert("asd")
}
}
});
// var TodoItme={
// template:"<li>局部组件</li>"
// }
new Vue({
el:"#root",
// components:{"todo-item":TodoItme},/*局部组件注册*/
data:{
inputValue:"",
list:[]
},
methods:{
handlseSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=""
}
}
});
</script>
</body>
</html>
1回答
-
- 有点猫腻丶丿
- 2018-07-28 11:18:23
因为template外面层嵌套的是双引号,你里面的点击内容也是双引号,所以导致无法解析
解决方法: 双引号嵌套,内容需用单引号扩住
单引号嵌套,内容需用双引号扩住
vue2.5入门
146818 学习 · 657 问题
相似问题