首页 > 编程笔记 > html/css > v-text和v-html的区别

v-text和v-html的区别

时间:2019-07-20

本文章向大家介绍v-text和v-html的区别，主要包括v-text和v-html的区别使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

　一、v-text

　　用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。

<span v-text="message"></span>
<!-- 简写方式 -->
<span>{{message}}</span>

export default {
  data () {
    return {
      message: "这里可以包含html标签"
    }
  }
}

　二、v-html

　如果你想输出真正的 HTML，你需要使用 v-html指令，v-text仅渲染标签，不能解析 HTML 代码。

 <p v-text=“message”></p>  
 <p v-html="message"></p>
    <script type="text/javascript">
        var app = new Vue({
        el: '#app', //element
        data: {
             message: '<strong>Hello</strong> Vue!',
            }
        })
    </script>

v-text展示效果： <strong>Hello</strong> Vue!

v-html展示效果： Hello Vue!

　　总结：v-text和{{}}表达式渲染数据，不解析标签。

　　　　　v-html不仅可以渲染数据，而且可以解析标签。　

原文地址：https://www.cnblogs.com/ruoyaozhan/p/11218080.html

随机文章

WEB前端知识点必读