vue 第二次学习笔记 v-once v-html

Posted 2021-05-26 竹石2020

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 第二次学习笔记 v-once v-html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: \'#app\',
    data: {
      message: \'hello\'
    }
  })
</script>
</body>
</html>

　　v-once 表示只执行一次数据的变换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
  <h2 v-html="url"></h2>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: \'#app\',
    data: {
      message: \'hello\',
      url: \'<a href="http://www.baidu.com">百度一下</a>\'
    }
  })
</script>
</body>
</html>

　　v-html主要作用是用来讲字符串变为html语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
  <h2>{{message}}</h2>
  <h1 v-pre>{{message}}</h1>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: \'#app\',
    data: {
      message: \'hello\',
    }
  })
</script>
</body>
</html>

　　v-pre用来原封不动的显示一个内容。例如显示带有mstache语法。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6   <style>
 7     [v-cloak]{
 8       display: none;
 9     }
10   </style>
11 </head>
12 <body>
13 <div id="app" v-cloak>
14     {{message}}
15 </div>
16 <script src="../vue.js"></script>
17 <script>
18   setTimeout(function () {
19     const app = new Vue({
20     el: \'#app\',
21     data: {
22       message: \'hello\'
23     }
24   })
25   },1000)
26 </script>
27 </body>
28 </html>

v-cloak 用来显示，该元素是否会带有v-cloak属性。当还没有vue代码还没有加载成功的时候，该标签就会带有v-cloak属性。当vue加载好了。

以上是关于vue 第二次学习笔记 v-once v-html的主要内容，如果未能解决你的问题，请参考以下文章

vue.js 使用v-model v-once