【转载】vuejs教程：在屏幕上以HTML模板的形式获取输出

最新推荐文章于 2023-07-20 11:53:28 发布

djk8888

最新推荐文章于 2023-07-20 11:53:28 发布

阅读量630

点赞数

原文链接：http://www.cainiaoxueyuan.com/gcs/5948.html

版权

地址：http://www.cainiaoxueyuan.com/gcs/5948.html

为此，可以通过使用v-html指令。当将v-html指令分配给html元素时，VueJS知道它必须以HTML内容的形式输出。现在通过template.html文件中添加v-html指令并查看之上面显示的结果有什么不同。

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs模板</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h2>名字 : {{name}}</h2>
         <h2>城市 : {{city}}</h2>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

HTML

现在，不需要使用双括号来显示HTML内容，而是使用了v-html ="html content"，其中html内容在vue_template.js文件中定义如下

var vm = new Vue({
   el: '#vue_det',
   data: {
      name : "Maxsu",
      city  : "海口",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})