怎么添加單擊事件就報(bào)錯(cuò)啊？
<!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>",? /*這里只要添加單擊事件就報(bào)錯(cuò)啊 button那個(gè)單擊事件就沒問題*/
? ? methods:{
? ? ?handClick:function(){
? ? ?alert("asd")
? ? ?}
? ? }
});
// var TodoItme={
// ?template:"<li>局部組件</li>"
// }
new Vue({
? ? el:"#root",
? ? // components:{"todo-item":TodoItme},/*局部組件注冊(cè)*/
? ? data:{
? ? ?inputValue:"",
? ? ?list:[]
? ? ?},
? ? ?methods:{
? ? ?handlseSubmit:function(){
? ? ?this.list.push(this.inputValue)
? ? ?this.inputValue=""
? ? ?}
? ? ?}
});
</script>
</body>
</html>
2018-07-28
因?yàn)閠emplate外面層嵌套的是雙引號(hào),你里面的點(diǎn)擊內(nèi)容也是雙引號(hào),所以導(dǎo)致無(wú)法解析
解決方法:????雙引號(hào)嵌套,內(nèi)容需用單引號(hào)擴(kuò)住
????????????? ??? 單引號(hào)嵌套,內(nèi)容需用雙引號(hào)擴(kuò)住