前端杂谈 · Web

vue动态修改插入html代码 v-html简单用法

•̀.̫•́✧ · 7月12日 · 2020年本文850字 · 阅读3分钟155

首先区分一下v-textv-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>
0 条回应