首先区分一下v-text和v-html的用法：
1.v-text：会把h1标签转义输出。即原模原样输出，h1标签没效果
2.v-html：会直接输出结果。即h1标签会出效果<body>
<div id="app">
{{word}}
<div v-text="word"></div>
<div v-html="word"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
word:"<h1>hello</h1>"
}
})
</script>
</body>点击按钮，插入一段html元素
使用v-html实现一个静态留言评论功能：
<section>
...
<div v-html="word"></div>
</section>
<section class="fd">
<img src="images/5.png" @click="f2">
<input type="text" placeholder="发表评论..." v-model="content">
</section>
<script>
var vm = new Vue({
el : "#app",
data :{
content : "",
word : ``,
num : 1
},
methods :{
f2(event){
if(this.num === 1){
this.word = `<div class="comment-li">
<div class="li-cm">
<img src="images/portrait7.png" alt="" >
<span class="l">匿名用户</span>
<span class="r">`+ new Date().toLocaleDateString() +`</span>
</div>
<p>`+ this.content +`</p>
<span class="dz">0</span>
<span class="pl">回复Ta</span>
</div>`;
this.num = 2
}else{
alert("您已经留言");
}
}
}
});
</script>
必须 注册 为本站用户， 登录 后才可以发表评论！