美文网首页
html页面引入vue.js 渲染时使用v-for会晃一下

html页面引入vue.js 渲染时使用v-for会晃一下

作者: 吖_7c06 | 来源:发表于2023-11-09 11:11 被阅读0次
<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue 避免渲染闪烁</title>
        <style type="text/css">
            [v-clock] {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app" v-clock>
            <div>
                {{ message }}
            </div>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
        <script type="text/javascript">
          Vue.directive('clock',{
                bind(el,binding,vnode){
                console.log(el);
                el.style.display = "block"
             }
           })
            new Vue({
                el: '#app',
                data: {
                    message: 99999
                }
            })
        </script>
    </body>

</html>

相关文章

  • 使用Editor.md保存的html代码 前端页面如何显示

    使用Editor.md保存的html代码 前端页面如何显示 1.引入css 2.引入js 3.模板引擎渲染html...

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

  • Vue 中 key 值的作用

    当 Vue.js 使用 v-for 正在更新已渲染过的元素列表时,默认用“就地复用”策略。如果数据项的顺序被改变,...

  • vue.js - 循环渲染

    vue.js 循环渲染 [TOC] 一、简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vu...

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue

    7、列表循环渲染 使用v-for渲染数组 运行结果 使用v-for渲染对象 运行结果 使用key优化性能 运行结果...

  • GettingStarted with Vue

    一、前端页面中(a.html): 引入vue.js库准备data;将data绑定到页面元素中 二、Crud 操作(...

  • vue.js 笔记

    v-for(循环) //html //vue.js v-model(双向数据绑定) //html //vue.js...

  • Vue 列表渲染

    Vue 使用 v-for 指令渲染一组数据 渲染数组 渲染对象 在 v-for 指令中可以使用 of 分隔符替换 ...

  • 【Vue】列表渲染与事件处理

    1. 列表渲染 使用v-for指令基于数组或对象来渲染一个列表 使用v-for迭代或遍历一个数组 使用v-for迭...

  • Font

    font-family(字体原理) 使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到文字时会...

网友评论

      本文标题:html页面引入vue.js 渲染时使用v-for会晃一下

      本文链接:https://www.haomeiwen.com/subject/txucwdtx.html