温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue指令中的v-once怎么使用

发布时间:2022-05-30 10:27:57 来源:亿速云 阅读:219 作者:iii 栏目:开发技术

本篇内容主要讲解“vue指令中的v-once怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue指令中的v-once怎么使用”吧!

    v-once在日常开发中用的很多

    只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

    常见用法如下

    当修改input框的值时,使用了v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的

    <div id="app">
            <p v-once>{{msg}}</p>  //msg不会改变
            <p>{{msg}}</p>
            <p>
                <input type="text" v-model = "msg" name="">
            </p>
        </div>
        <script type="text/javascript">
            let vm = new Vue({
                el : '#app',
                data : {
                    msg : "hello"
                }
            });
        </script>

    v-once是什么

    v-once 能够让标签的内容,也就是 {{str}} 中,data里面的某个数据例如str,保持在vue的data初始化之后,str的第一个值。

    下面的写法

    <div v-once>{{str}} </div>
    <el-input v-model="str"></el-input>

    str初始是&rsquo;&rsquo;,空字符串;

    然后在created中从后端接口获得数据给str赋值:this.str = &lsquo;aaa&rsquo;;

    最后在mounted中江str清空:this.str = &lsquo;&rsquo;;

    获得效果

    vue指令中的v-once怎么使用

    到此,相信大家对“vue指令中的v-once怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI