首页documen innerHTML this.$refs

documen innerHTML this.$refs

时间: 2025-01-26 22:10:23 浏览: 39

`document.innerHTML` 和 `this.$refs` 是前端开发中常用的两种操作DOM的方法，但它们的使用场景和方式有所不同。 ### document.innerHTML `document.innerHTML` 是JavaScript中用于获取或设置HTML元素内容的一种属性。通过设置 `innerHTML`，你可以动态地修改页面上的内容。 #### 使用示例 ```html <!DOCTYPE html> <html> <head> <title>innerHTML 示例</title> </head> <body> <div id="myDiv">原始内容</div> <button onclick="changeContent()">修改内容</button> <script> function changeContent() { document.getElementById("myDiv").innerHTML = "内容已被修改"; } </script> </body> </html> ``` 在这个示例中，当用户点击按钮时，`changeContent` 函数会被调用，并通过 `document.getElementById("myDiv").innerHTML` 修改 `id` 为 `myDiv` 的 `div` 元素的内容。 ### this.$refs `this.$refs` 是Vue.js中的一种特殊属性，用于引用组件中的DOM元素或子组件。通过 `ref` 属性和 `this.$refs`，你可以直接访问和操作特定的DOM元素或子组件。 #### 使用示例 ```html <template> <div> <div ref="myDiv">原始内容</div> <button @click="changeContent">修改内容</button> </div> </template> <script> export default { methods: { changeContent() { this.$refs.myDiv.innerHTML = "内容已被修改"; } } } </script> ``` 在这个Vue.js示例中，`div` 元素被添加了 `ref="myDiv"` 属性。在 `changeContent` 方法中，通过 `this.$refs.myDiv` 引用该 `div` 元素，并修改其内容。 ### 总结 - `document.innerHTML` 是原生的JavaScript方法，适用于所有浏览器环境。 - `this.$refs` 是Vue.js中的特性，提供了更方便的方式来引用和操作DOM元素或子组件。

阅读全文