- 一、前言当 Vue.js 用v-for更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 二、key 的两种应用场景 2.1 在列表渲染时使用 key 属性假设Vue实例的data属性中有一个叫numbers的变量，它的值是[1, 2, ... 一、前言当 Vue.js 用v-for更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 二、key 的两种应用场景 2.1 在列表渲染时使用 key 属性假设Vue实例的data属性中有一个叫numbers的变量，它的值是[1, 2, ...
- 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性，天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template", 这是因为template标签天生不可见--><template> ... 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性，天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template", 这是因为template标签天生不可见--><template> ...
- 一、前言一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。显然，采取这样的数据访问方式，代码略显繁杂，辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实... 一、前言一般情况下，如果需要访问vuex.store中state存放的数据，需要使用this.$store.state.属性名方式。显然，采取这样的数据访问方式，代码略显繁杂，辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实...
- 项目开发过程中，需要实现操作栏位图标按钮与文字按钮切换效果，在实现文字按钮过程中，大致思路如下：操作栏位只展示前2个菜单，之后的菜单采用更多方式展示，通过点击更多展示其余菜单按钮。实现代码如下：<template slot-scope="scope"> <el-dropdown :split-button="false" trigger="click" type="text" @comman... 项目开发过程中，需要实现操作栏位图标按钮与文字按钮切换效果，在实现文字按钮过程中，大致思路如下：操作栏位只展示前2个菜单，之后的菜单采用更多方式展示，通过点击更多展示其余菜单按钮。实现代码如下：<template slot-scope="scope"> <el-dropdown :split-button="false" trigger="click" type="text" @comman...
- 一、前言项目开发过程中，通过iframe引入其他页面，返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回，但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)... 一、前言项目开发过程中，通过iframe引入其他页面，返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回，但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)...
- 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ... 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ...
- 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ... 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ...
- 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用... 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用...
- 记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。 记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。
- 在目前 Vue.js 盛行的前端开发时代，一个较为稳定、可持续更新、具有强大团队背景的 UI 前端 PC 框架——ElementUI（饿了么UI）框架应运而生。它带给我们的不仅仅是柔美、华丽、实用的控件，更多的是那种轻松上手、简单快捷的引用组件方式，以及它开放式的、目录明确的帮助文档。 在目前 Vue.js 盛行的前端开发时代，一个较为稳定、可持续更新、具有强大团队背景的 UI 前端 PC 框架——ElementUI（饿了么UI）框架应运而生。它带给我们的不仅仅是柔美、华丽、实用的控件，更多的是那种轻松上手、简单快捷的引用组件方式，以及它开放式的、目录明确的帮助文档。
- 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports... 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports...
- 1、v-show v-show指令根据表达式的真假，显示或隐藏HTML元素。 使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!... 1、v-show v-show指令根据表达式的真假，显示或隐藏HTML元素。 使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!...
- 1、计算属性的定义 表达式的逻辑过于复杂的时候，应当考虑使用计算属性。计算属性是以函数形式，在选项对象的computed选项中定义。我们将字符串翻转的功能用计算属性实现，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con... 1、计算属性的定义 表达式的逻辑过于复杂的时候，应当考虑使用计算属性。计算属性是以函数形式，在选项对象的computed选项中定义。我们将字符串翻转的功能用计算属性实现，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con...
- 1、简介 表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <... 1、简介 表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <...
- 1、简介 组件是当作自定义元素使用的，元素可以有属性和内容，通过组件定义的prop接收属性值，可以解决属性问题，那么内容呢？这可以通过<slot>元素解决。此外，插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。Vue.component('greeting',{ template:'<div><slot></slot></div>'}) 在组... 1、简介 组件是当作自定义元素使用的，元素可以有属性和内容，通过组件定义的prop接收属性值，可以解决属性问题，那么内容呢？这可以通过<slot>元素解决。此外，插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。Vue.component('greeting',{ template:'<div><slot></slot></div>'}) 在组...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签