为什么下面代码点击删除按钮不能成功触发m2函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="Vue.js"></script> </head> <body> <div id="wer"> <table id="123" border="1"> <tr> <td> 文本数据</td> <td>含有标签的文本数据</td> </tr> </table> 文本数据<input type="text" v-model="value1"> <input type="button" value="提交" @click="m1"> </div> <script> new Vue({ el:"#wer", data:{ value1:"", deleteId:"34" }, methods:{ m1:function () { var htmlTableDataCellElement = document.createElement("td"); htmlTableDataCellElement.innerText=this.value1; var htmlTableDataCellElement1 = document.createElement("td"); htmlTableDataCellElement1.innerHTML="<input type=\"button\" value=\"删除\" @click=\"m2\">"; var htmlTableRowElement = document.createElement("tr"); htmlTableRowElement.id=this.deleteId; htmlTableRowElement.appendChild(htmlTableDataCellElement); htmlTableRowElement.appendChild(htmlTableDataCellElement1); var elementById = document.getElementById("123"); elementById.appendChild(htmlTableRowElement); }, m2:function () { console.log(document.getElementById("34")); } } }) </script> </body> </html>
时间: 2024-01-21 21:05:06 浏览: 27
这是因为在创建包含删除按钮的单元格时,使用了字符串而不是Vue模板。这样做会导致Vue无法将@click事件绑定到m2方法上。可以将创建单元格的代码重写为以下形式:
```
var htmlTableDataCellElement1 = document.createElement("td");
var deleteButton = document.createElement("input");
deleteButton.type = "button";
deleteButton.value = "删除";
deleteButton.addEventListener("click", this.m2);
htmlTableDataCellElement1.appendChild(deleteButton);
```
这样就可以将点击事件绑定到Vue实例的m2方法了。
相关问题
<!DOCTYPE html> ↵ ↵<html> ↵<head> ↵ <meta charset="utf-8" /> ↵ <meta name="viewport" content="widt
<!DOCTYPE html>是HTML文档类型声明,它告诉浏览器正在使用哪个HTML版本来解析文档。在HTML5中,<!DOCTYPE html>是唯一的文档类型声明,它告诉浏览器使用HTML5规范来解析文档。在HTML文档中,<!DOCTYPE html>应该作为第一行。
下面是一个简单的HTML文档示例,其中包含了<!DOCTYPE html>声明:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My HTML Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
</body>
</html>
```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>是一个HTML页面模板,它是一个简单的404页面,用于显示“Not found”错误信息。在这个模板中,<!DOCTYPE html>定义了文档类型,<html>标签定义了HTML文档的根元素,<head>标签定义了文档的头部部分,<meta charset="UTF-8">指定了文档的字符编码为UTF-8,<title>标签定义了文档的标题,<body>标签定义了文档的主体部分,<h1>标签定义了一个一级标题。