vue指令中的v-once用法

目录
  • v-once在日常开发中用的很多
    • 常见用法如下
  • 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初始是’’，空字符串；

然后在created中从后端接口获得数据给str赋值：this.str = ‘aaa’;

最后在mounted中江str清空：this.str = ‘’;

获得效果

这样即不耽误再次赋值又不耽误显示

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue学习笔记之动态组件和v-once指令简单示例

    本文实例讲述了vue动态组件和v-once指令.分享给大家供大家参考,具体如下: 点击按钮时,自动切换两个组件 <component :is="type"></component>,当点击按钮之后,会自动清除原来的组件,显示新的组件. 每一次切换,都需要销毁+创建 但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁. <!DOCTYPE html> <html lang="

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • Vue 动态组件components和v-once指令的实现

    一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

  • vue框架中props的typescript用法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 在vue中使用typescript时,需要引入vue-pro

  • vue指令中的v-once用法

    vue指令中的v-once用法

    目录 v-once在日常开发中用的很多 常见用法如下 v-once是什么 v-once在日常开发中用的很多 只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能. 常见用法如下 当修改input框的值时,使用了v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的 <div id="app">         <p v-once>{{msg}}</p>  //msg不

  • 详解Vue 项目中的几个实用组件（ts）

    前言 这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用.如果还没有使用过 ts 的同学可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList这边文章开始你的 ts 之旅,后续代码也是在 todoList 的结构上改进的 vue 路由中的懒加载 你真的用好了路由的懒加载吗? 在 2.x 的

  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • Vue.js中v-show和v-if指令的用法介绍

    Vue.js中v-show和v-if指令的用法介绍

    目录 一.v-show指令 二.v-if指令 三.v-show和v-if的区别 四.v-else指令 五.v-else-if 一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show="true",表示显示DOM元素. v-show="false", 表示隐藏DOM元素. 看下面的示例: <!DOCTYPE html>

  • 详解vue 2.6 中 slot 的新用法

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性. 真正有能力的插槽是什么? 如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读.也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要. 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 插槽是什么? 插槽是Vue组件的一种机制,它允许你以一种不同于严格的父子关系的方式组合组件.插

  • Vue3中的模板语法和vue指令

    目录 1 模板插值语法 2 指令 1 模板插值语法 在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ message2 + 1 }} {{ message.split('').map(v => `4546$v`) }} </template> <

  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

随机推荐