问答详情
源自：2-3 Vue实例中的数据,事件和方法

为什么模板改的是outerHTML而不是innerHTML?

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue入门</title><script src="./vue.js">{{msg}}</script></head><body><div id="root" v-on:click="handleClick">Hello world 1!{{msg}}</div><script>var dom111= document.getElementById("root");dom111.innerHTML = "Hello World3";dom111.innerHTML = "{{msg}}";new Vue({el:"#root",//加上模板这句，发现id为root的outHTML被替换为<h1>了，不是innerHTML//为什么和老师讲的不一样？//template : "<h1>Hello {{msg}}",  data:{msg : "Hello world 2!"},methods:{handleClick : function(){this.msg = "world5";}}});</script></body></html>


提问者：慕侠0346289 2020-03-19 18:02

个回答

  • 阿里0111
    2021-01-17 21:02:41

    现在解决了吗？没有解决的话我的回答是：

    template : "<h1>Hello {{msg}}",

    造成改变元素标签原因在于你自行增添的<h1>标签样式覆盖引起。

    data:{msg : "Hello world 2!"},

    0
  • 慕侠0346289
    2020-03-19 18:04:32

    <!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Vue入门</title>
<script src="./vue.js">{{msg}}</script>
</head>
<body>
<div id="root" v-on:click="handleClick">Hello world 1!{{msg}}</div>
<script>
var dom111= document.getElementById("root");
dom111.innerHTML = "Hello World3";
dom111.innerHTML = "{{msg}}";
new Vue({
el:"#root",
//加上模板这句，发现id为root的outHTML被替换为<h1>了，不是innerHTML
//为什么和老师讲的不一样？
template : "<h1>Hello {{msg}}",  
data:{msg : "Hello world 2!"},
methods:{handleClick : function(){this.msg = "world5";
}}});
</script>
</body></html>


    0