v-html(解析html)，v-pre（不解析html）,v-text（））

v-html(解析html)：我们解析data中的对象时，data里面的内容有包括html标签，我们主要是解析不到的，那么我吗需要使用到v-html

缺点：但是它会覆盖标签里面的内容哦

代码如下：

<body>
<div id='app'>
  <h2 v-html="demo"></h2>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            movios: '你好啊',
            demo:'<h2 style="color: red">xiao </h2>'
        }
    })
</script>
</body>

v-text（不解析html）:缺点同样是会覆盖标签里面的内容

<body>
<div id='app'>
  <h2 v-html="demo">demo</h2>
  <h2 v-text="demo">demo</h2>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            movios: '你好啊',
            demo:'<h2 style="color: red">xiao </h2>'
        }
    })
</script>
</body>

运行结果

 

v-pre: 

<body>
<div id='app'>
  <h2 v-pre>{{demo}}</h2>
  <h2>{{demo}}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            movios: '你好啊',
            demo:'<h2 style="color: red">xiao </h2>'
        }
    })
</script>
</body>

运行结果：

 

posted @ 2020-12-25 21:42  无心1111  阅读(985)  评论(0)    收藏  举报