vue运行以后没有渲染,出现{{message}}
时间: 2023-11-01 16:22:47 浏览: 31
出现 `{{message}}` 的情况通常是因为 Vue 没有正确绑定数据。根据你提供的代码,可能是因为 `getIndexHtml()` 方法中的语句 `this.index.Html = html` 中的 `this.index` 没有定义。
你可以通过以下两种方式来解决这个问题:
1. 将 `this.index.Html = html` 改成 `this.message = html`,这样就可以将获取到的 `index.html` 文件内容绑定到 Vue 实例的 `message` 属性上,然后在模板中使用 `{{message}}` 来显示这个内容。
2. 在 Vue 实例的 `data` 中添加 `index` 属性,然后将 `this.index.Html = html` 改成 `this.index = { Html: html }`,这样就可以将获取到的 `index.html` 文件内容绑定到 Vue 实例的 `index.Html` 属性上,然后在模板中使用 `{{index.Html}}` 来显示这个内容。
下面是修改后的代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script>
<script src="../../../vue.config.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
var Vue = window.Vue // 或者使用 Vue 的 CDN 地址来引入 Vue 库
var app=new Vue({
el : '#app',
data : {
message : 'hello world',
index: {
Html: ''
}
},
render(h) { // 使用 render 函数来定义模板
return h('div', this.message);
},
created () {
this.getIndexHtml()
},
methods:{
getIndexHtml() {
fetch('index.html')
.then(res=>res.text())
.then(html=>{
// this.index.Html = html;
this.index = { Html: html };
})
}
}
})
</script>
</body>
</html>
```
注意:如果你使用的是第二种方式,需要将模板中的 `{{message}}` 改成 `{{index.Html}}`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)