v-html & v-cloak & v-text & v-once

最新推荐文章于 2024-02-22 00:00:00 发布

真是敞亮

最新推荐文章于 2024-02-22 00:00:00 发布

阅读量138

点赞数

分类专栏： JS Vue 文章标签： VueJS

本文链接：https://blog.csdn.net/weixin_45743297/article/details/103197586

版权

JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

经久不更博客.今天简单点

v-html

<script src="js/vue.js"></script>

<div id="app">
    <h1>{{msg}}</h1>
    <h1 v-html="msg"></h1>
</div>

<script>
var vm=new Vue({
  el:"#app",
  data:{
    msg:`来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息`
  }
})
</script>

效果对比是这样的.
在这里插入图片描述

v-cloak

 <script src="js/vue.js"></script>
  <style>
  [v-cloak]{
      display: none;
  }
  </style>
</head>
<body>
<div id="app">
    <h1 v-cloak>用户名:{{uname}}</h1>
    <h1 v-cloak>积分{{score}}</h1>
</div>
<script>
    setInterval(function(){
        var vm=new Vue({
        el:"#app",
        data:{
            uname:"dingding",
            score:3000
        }
        })
    },2000)
</script>

显示效果:2s后显示以下页面
在这里插入图片描述

v-text

<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-text="`用户名:{{uname}}`"></h1>
    <h1 v-text="">积分:<span v-text="score"></span></h1>
</div>
<script>
    setInterval(function(){
        var vm=new Vue({
        el:"#app",
        data:{
            uname:"dingding",
            score:3000
        }
        })
    },2000)

0s时
在这里插入图片描述
2s时

4s时

v-once

 <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>当前系统时间:{{time}}</h1>
    <h1 v-once>上线时间:{{time}}</h1>
</div>
<script>
var vm=new Vue({
  el:"#app",
  data:{
    time:new Date().toString()
  }
})
setInterval(function(){
    vm.time=new Date().toString()
},1000)
</script>