v-text,v-html,{{data属性}},的用法和区别 「Vue基础」
kite1874 / 2020-01-07 / Web前端 / 阅读量 372

作为一个想成为码农,却还没有成为码农的可怜虫。这一年看到跟Vue相关的资讯不在少数,心里想学,却迟迟未动手。经过两次面试的似水。开始摸清了企业对于前端的一些要求,Vue成了必备的技能,如果你不会Vue、或者其他的两大框架,基本没戏。

碰壁之后,我决定回炉重造,好好学一下Vue。今天开始我决定着手学一些关于前端的文章,也算巩固一下学过的知识。

Vue一共有三种插值的方式:

{{}},v-text,v-html

下面用一个demo来演示他们使用方法和区别。

 <div id="app">
        <p>{{message}}支持字符串拼凑</p>
        <p v-text="text">里面的内容会被覆盖<div>块元素不会被覆盖</div></p>
        <p v-html="html">v-text会覆盖原本的内容<div>块元素不会被覆盖</div></p>
    </div>

    <script>
       var vm = new Vue({
           el: "#app",
           data: {
               message: 'KiteLife',
               text: 'v-text会覆盖原本的文本内容,没有加载闪烁的问题',
               html: '<h3>v-html用来插入html标签,会覆盖原本的文本内容,没有加载闪烁的问题</h3>'
           }
       }) 
    </script>

运行效果:

从上面的demo可以看出
{{}}:支持字符串拼接,但是有加载闪烁问题,可以使用v-block来解决
v-text:它会覆盖原有的文本内容,但是不会覆盖标签内的其他块元素(h1、div、p等等),没有闪烁问题
v-html:它会覆盖原有的文本内容,但是不会覆盖标签内的其他块元素(h1、div、p等等),没有闪烁问题

具体什么是Vue闪烁问题,大家可以自行百度。