vue 内置指令

最新推荐文章于 2024-07-23 21:45:00 发布

qq_40051569

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量116

点赞数

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

本文链接：https://blog.csdn.net/qq_40051569/article/details/129401484

版权

前端 vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

内置指令

v-text

在这里插入图片描述

v-html

document.cookie 可以获取当前网站所有cookie
F12 ：在应用里，或者application里
在这里插入图片描述

在这里插入图片描述

v-cloak

在这里插入图片描述

js阻塞

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{tims}}</h2>
        <!-- 禁止未经解析的属性，显示到页面上，配合style -->
        <h2 v-cloak>{{tims}}</h2>
    </div>
    <script type="text/javascript" >
        new Vue({
            el:'#app',
            data:{
                tims:1675232697,
                msg:'<h2>123！</h2>',
                str:''
            }
        })
    </script>

v-once

在这里插入图片描述

    <div id="app">
        <h2>{{tims}}</h2>
        <!-- 初次渲染后，变静态 -->
        <h2 v-once>{{n}}</h2>
        <button @click="n++">{{n}}</button>
    </div>
    <script type="text/javascript" >
        new Vue({
            el:'#app',
            data:{
                n:1
            }
        })
    </script>