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 = ‘’;
获得效果
这样即不耽误再次赋值又不耽误显示
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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学习笔记之动态组件和v-once指令简单示例
本文实例讲述了vue动态组件和v-once指令.分享给大家供大家参考,具体如下: 点击按钮时,自动切换两个组件 <component :is="type"></component>,当点击按钮之后,会自动清除原来的组件,显示新的组件. 每一次切换,都需要销毁+创建 但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁. <!DOCTYPE html> <html lang="
-
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用法
目录 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指令的用法介绍
一.什么是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指令介绍
在项目中运行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指令的用法介绍
目录 一.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详解
想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令
随机推荐
- JavaScript设计模式之单件模式介绍
- ExtJS PropertyGrid中使用Combobox选择值问题
- python实现异步回调机制代码分享
- asp.net Repeater之非常好的数据分页
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 基于nopCommerce的开发框架 附源码
- php实现的DateDiff和DateAdd时间函数代码分享
- PHP使用mysql_fetch_row查询获得数据行列表的方法
- ECMAScript 5中的属性描述符详解
- 数据分析软件之FineReport教程:[5]参数界面JS(全)
- 在.jsp中非表单请求action的几种方式总结
- 简单实现jsp分页
- jsp实现购物程序
- IE6 fixed的完美解决方案
- Android仿支付宝手势密码解锁功能
- Android App中ListView仿QQ实现滑动删除效果的要点解析
- .net输出重写压缩页面文件的小例子
- table insertRow、deleteRow定义和用法总结
- 在VBScript中使用类