Vue学习[mustache语法]

最新推荐文章于 2024-08-28 10:43:53 发布

-易拉罐

最新推荐文章于 2024-08-28 10:43:53 发布

阅读量70

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u012765977/article/details/121883900

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

了解vue mustache基础操作

v-once

<div id="app">
  <h3>{{message}}</h3>
  <!--messge发生改变, 元素不跟着改变-->
  <h3 v-once>{{message}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',

    }
  })
</script>

v-html

<div id="app">
  <h4 v-html="url"></h4>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',
      url: '<a href="http://www.abc.com">这是一个链接</a>'
    }
  })
</script>

v-text

<!--使用比较少,不够灵活-->
<div id="app">
  <h3 v-text="message"></h3>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',

    }
  })
</script>

v-pre

<!--原样显示标签内容-->
<div id="app">
  <h3 v-pre>{{message}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Saber',

    }
  })
</script>

v-cloak

<!--了解-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{display: none}
  </style>
</head>
<body>
<div id="app">
  <h3 v-cloak>{{message}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Saber',

      }
    })
  }, 2000)

</script>
</body>
</html>

-易拉罐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习[mustache语法]

了解vue mustache基础操作v-once<div id="app"> <h3>{{message}}</h3>  <h3 v-once>{{message}}</h3></div><script src="../js/vue.js"></script><script> const app = new V
复制链接

扫一扫

专栏目录