v-oncev-prev-cloak作用-创新互联

这三个指令都是用来优化性能体验的：一个是搞一次不搞了 ,一个是干脆不搞，另一个是块遮羞布

目前创新互联建站已为数千家的企业提供了网站建设、域名、网页空间、绵阳服务器托管、企业网站设计、崇礼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

v-once
当你只希望元素加载一次后面不再改变的时候，这个时候可以在根元素上添加这个指令。确保这些内容不会跟着数据改变而改变，只在初次页面加载时候计算一次然后缓存起来，v-once后面不用跟表达式

<div id="app">
        <img v-once :src="url" >
         <button @click="change">换图片</button>
    </div>
    <script type="text/javascript">
            const app = new Vue({
            el:"#app",
            data:{
                url:"/tupian/20230521/8699.jpg"
            },
            methods:{
                change(){
                    this.url = "/tupian/20230521/8700.jpg"
                }
            }
        })
    </script>

v-pre
一些静态的内容不需要编译加上这个指令可以加快编译，程序执行的时候就会跳过这个元素和它的子元素的编译过程。v-pre后面也不用跟表达式

 <h2 v-pre>哈哈哈哈哈哈哈</h2>

v-cloak
这个其实是用在网络比较差程序执行慢或卡的时候，浏览器可能会显示出如下页面

<div id="app">
    <div>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            <h2>{{count}}</h2>
            </div>
        </div>

此时，模板还未挂载到页面上，真实数据还没显示出来，看起来比较丑，那怎么办，要不就找一个斗篷先遮住吧，等到模板挂载上去数据正常显示了，再把斗篷扔了。v-cloak后面也不用跟表达式

cloak 英[kləʊk] 美[kloʊk]
n. (尤指旧时的) 披风，斗篷; 遮盖物;

  <style type="text/css">
        [v-cloak]{
            display: none;
        }
       </style>
    </head>
    <body>
        <div id="app">
            <div v-cloak>
                <h2>{{count}}</h2>
                <h2>{{count}}</h2>
                <h2>{{count}}</h2>
                <h2>{{count}}</h2>
                <h2>{{count}}</h2>
            </div>
        </div>
        <script type="text/javascript">
            setTimeout(function(){
                const app = new Vue({
                    el: "#app",
                    data: {
                        count: "1111"
                    },
                    methods: {

                    }
                })
            },3000)

        </script>
    </body>

当前文章：v-oncev-prev-cloak作用-创新互联
转载注明：https://www.cdcxhl.com/article40/cssoeo.html

成都网站建设公司_创新互联，为您提供外贸网站建设、云服务器、微信小程序、商城网站、网站营销、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容