Vue基本指令之v-cloak

傷城~ 2023-10-18 08:52 17阅读 0赞

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue内置指令</title>
     </head>
     <body>
     <h1>基本指令 v-cloak</h1>
     v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none配合使用。
      <div id="app1" v-cloak>
      {
       {message}}
     </div>
    这时虽然加了指令v-cloak,但其实并没有起到任何作用，当网速较慢、Vue.js文件还没有加载完时，在页面上会显示<span v-pre>{
       {message}}</span>
    的字样，直到Vue创建实例、编译模板时，DOM才会被替换，只要加一句CSS就可以解决问题。
    <pre>
    [v-cloak]{
      display:none;
     }
    </pre>
    
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
     var app1 = new Vue({
      el:'#app1',
      data:{
       message:'Vue 基本指令 v-cloak 测试隐藏文本'
      }
     })
     [v-cloak]{
      display:none;
     }
    </script>
     </body>
    </html>

![70][]

[70]: https://img-blog.csdn.net/20180915220404530?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js基本指令

目录插值表达式“\{ \{\}\}” v-html和v-text指令例1 v-on指令例1 v-model指令例1 v-if指令例1：判断二月份有

朴灿烈づ我的快乐病毒、/ 2024年03月25日 09:44/ 0 赞/ 70 阅读

相关 Vue基本指令之v-cloak

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

傷城~/ 2023年10月18日 08:52/ 0 赞/ 18 阅读

相关 Vue基本的内置指令

前言除了常见的v-bind,v-for,v-if,v-on.v-model等，本次学习一些vue提供的其他内置指令 1 v-text 给标签插入文本，类似于插值

落日映苍穹つ/ 2023年09月26日 22:59/ 0 赞/ 156 阅读

相关 vue 基本指令

vue 基本指令 1. v-bind 可以绑定一个属性这个属性可以是自带的属性也可以是自定义属性，可简写为： 2. v-on 事件后面加上事件名，可简写为 @

ゝ一世哀愁。/ 2023年06月29日 05:51/ 0 赞/ 27 阅读

相关 VUE 基本指令（代码）

HTML 部分 <div id="username"> { {message}} <!-- v-model 绑定响应 mes

刺骨的言语ヽ痛彻心扉/ 2023年06月28日 06:18/ 0 赞/ 18 阅读

相关 Vue.js高效前端开发 • 【Vue基本指令】

[全部章节 >>>>][Link 1] -------------------- 文章目录一、Vue模板语法 1、插值 2、表达式

客官°小女子只卖身不卖艺/ 2022年10月10日 09:59/ 0 赞/ 195 阅读

相关 vue 指令基本使用

目录(?)\[+\] 1. 指令 2. 1. 常用指令 2. v-text 3. v-html 4. v-bind 5. v-o

港控/mmm°/ 2022年06月03日 09:35/ 0 赞/ 244 阅读

相关 vue基本指令

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

逃离我推掉我的手/ 2022年02月21日 08:44/ 0 赞/ 304 阅读

相关 Vue.js------Vue基本指令(三)

一、v-bind指令设置元素的属性(src,title,class) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

- 日理万妓/ 2021年09月23日 15:30/ 0 赞/ 363 阅读

相关 Vue.js------Vue基本指令(二)

一、v-text指令 v-text:以纯文本方式显示数据； ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

末蓝、/ 2021年09月23日 15:28/ 0 赞/ 365 阅读