本篇内容主要讲解“vue指令中的v-once怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue指令中的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 能够让标签的内容,也就是 {{str}} 中,data里面的某个数据例如str,保持在vue的data初始化之后,str的第一个值。
下面的写法
<div v-once>{{str}} </div> <el-input v-model="str"></el-input>
str初始是’’,空字符串;
然后在created中从后端接口获得数据给str赋值:this.str = ‘aaa’;
最后在mounted中江str清空:this.str = ‘’;
获得效果
到此,相信大家对“vue指令中的v-once怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。