vue2 基础（四）

最新推荐文章于 2025-07-03 22:22:13 发布

原创最新推荐文章于 2025-07-03 22:22:13 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-html

vue 专栏收录该内容

22 篇文章

订阅专栏

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------

本篇我们来看看 v-html指令的用法；

我们在之前了解了如何把数据渲染到页面上，我们再回忆一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span>{{message}}</span>
     </div>

     <script>
          let abc={
              message:"我是数据"
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

上面我们通过 {{ }} 的方式把数据 message="我是数据" 输出到了页面中；

好的，上面没什么问题，我们再看看下面的这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span>{{message}}</span>
     </div>

     <script>
          let abc={
              message:"<span>我是新的内容哦<span>"
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>

最后在页面中显示的内容：<span>我是新的内容哦<span>

并没有解析成<span> ,也就是说 {{ }} 解析的都是文本，

那么我想把上面的内容解析成代码怎么办，那就需要用到 v-html 指令了，来看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2基础</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="main">
         <span v-html="message"></span>
     </div>

     <script>
          let abc={
              message:"<span>我是新的内容哦<span>"
          }
          new Vue({
              el:"#main",
              data:abc
          });
     </script>
</body>
</html>