网站建设   网站建设技术   技术教程   JavaScript教程   vue技术   Vue指令汇总  

基本指令v-once

人浏览  发布时间:2022-05-26

v-once 也是一个不需要 表达式 的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容 下面示例,原本是...
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容
  下面示例,原本是每一秒展示动态随机数,但是因为使用v-once 首次渲染后,就不在改变数字了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" >
    
       <span v-once>{{message}}</span>
    </div>
    <script src="vue.js">
 
    </script>
    <script>
         var app = new Vue({
             el:"#app",
             data:{message:0},
             mounted()
            {
                _this = this;
                // 这样才可以指向vue实例
                this.timer = setInterval(function(){_this.date = new Date();_this.message = Math.random() },1000);
 
            }
         })
    </script>
    <!-- 
        v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容 
        原本是每一秒展示动态随机数,但是因为使用v-once 首次渲染后,就不在改变数字了
    -->
</body>
</html>
点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图