位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 数据绑定 v-once指令
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 数据绑定 v-text指令 下一篇: 数据绑定 v-cloak指令

该指令后面不需要跟任何表达式(v-for后面接表达式)。

该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。

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

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

常见用法如下:

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

小白教程网www.2d5.net

代码如下:

<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-text指令 下一篇: 数据绑定 v-cloak指令
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)